React Router V4（React Router dom）以编程方式在树的深处导航[重复]

Question

我查看了下面的帖子，虽然它给出了几种不同的解决方案，但似乎都不能解决我的问题。

使用react router V4，我需要通过编程从树中的组件中导航，这些组件将无法访问传递的路由器道具（历史记录、url、参数等）。最直接的方法是什么？

Answer 1

最直接的方法是像这样将历史记录移动到单独的文件中

history.js：

import createHistory from 'history/createBrowserHistory'
const history = createHistory()
export default history

然后在任何其他组件中：

import history from 'path/to/history.js'

...
someFoo(){
  history.push({
    pathname: '/new/url',
  })
}
...

您还需要确保您通过新的历史到您的路由器使其工作

Answer 2

树中的任何组件，无论其深度如何，都可以访问历史，位置和匹配道具，这些道具由react-router使用。要做到这一点，您必须将组件包装在react-router提供的带有路由器HOC的中。

代码：

//other imports
import {withRouter} from 'react-router-dom'

//define component MyComponent here

export default withRouter(MyComponent);

在上面定义的MyComponent内部，您可以使用this.props.history.push（newURL）访问historyprop并重定向到任何新url 您可以在以下位置找到更多信息：https://reacttraining.com/react-router/web/api/withRouter