reactjs - 将位置传递给 BrowserRouter 的子级 - React Router

Question

我有以下代码:

  <BrowserRouter>
    <IndexComponent />
  </BrowserRouter>

我在里面有一个开关所有的路由。

索引组件.js:

<Switch >
  <Route exact path="/course_info/:id" component={CourseInfoPage} />
    <Route exact path="/"  component={Main} />
    .
    .
    .
</Switch>

我想访问 IndexComponent 中的 location 属性，以便像这样添加过渡动画:

<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>

如您所见，我需要 IndexComponent 中的 location 属性。 但它不在那里。为什么不，我应该如何添加它？

Answer 1

我认为传递 location 属性的唯一方法是使用 <Route />

  <BrowserRouter>
    <Route render={(props) => <IndexComponent location={props.location}/> }> </Route>
  </BrowserRouter>

然后做

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