将位置传递给 BrowserRouter 的子节点 - React Router

Posted 2023-02-22

【中文标题】将位置传递给 BrowserRouter 的子节点 - React Router

【英文标题】：Passing location into children of BrowserRouter - React Router

【发布时间】：2018-09-16 19:17:53

【问题描述】：

我有以下代码：

  <BrowserRouter>
    <IndexComponent />
  </BrowserRouter>

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

IndexComponent.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 属性。 但它不存在于那里。为什么不，我应该如何添加它？

【问题讨论】：

这可能会帮助你***.com/questions/44009618/…

【参考方案1】：

我认为传递位置道具的唯一方法是使用<Route />

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

那就做吧

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

【讨论】：

或withRouter HOC，不过<Route component=IndexComponent />也可以使用

@ShubhamKhatri 如果你这样做 <Route component=IndexComponent /> 不应该使用 render 而不是 component 这样你就可以访问 match location history 道具等？

使用component 所有道具都将传递给IndexComponent，如果您使用渲染，它会在回调中将道具返回给您，您可以决定有选择地传递给组件。但是，如果您需要传递一些自定义道具，大多数情况下您会使用渲染。你可以检查这个***.com/questions/44255415/…