Q:

Passing location into children of BrowserRouter - React Router

I have the following code:
  <BrowserRouter>
    <IndexComponent />
  </BrowserRouter>

Inside  I have a switch with all the routes.
IndexComponent.js:
<Switch >
  <Route exact path="/course_info/:id" component={CourseInfoPage} />
    <Route exact path="/"  component={Main} />
    .
    .
    .
</Switch>

I would like to have access to location prop in IndexComponent in order add transition animation like so:
<CSSTransition key={location.key} classNames="fade" timeout={300}>
  <Switch location={location}>
    <Switch >
      <Route exact path="/course_info/:id" component={CourseInfoPage} />
        <Route exact path="/"  component={Main} />
        .
        .
        .
    </Switch>
  </CSSTransition>
</TransitionGroup>

As you can see, I need the location prop inside IndexComponent.
But it is not present there. Why not, and how should I add it?

A:

I think the only way to pass the location prop down is to use <Route /> 
  <BrowserRouter>
    <Route render={(props) => <IndexComponent location={props.location}/> }> </Route>
  </BrowserRouter>

Then do 
<CSSTransition key={this.props.location} classNames="fade" timeout={300}>

