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

【问题标题】：React Router V4 (react-router-dom) navigate programatically deep in the tree [duplicate]React Router V4（react-router-dom）以编程方式在树的深处导航[重复]
【发布时间】：2018-04-04 15:21:25
【问题描述】：

我已经检查了the following post，尽管它提供了几种不同的解决方案，但没有一个可以解决我的问题。

使用 react-router V4，我需要以编程方式从我的树内部的组件导航，不会访问传递的路由器道具（历史记录、url、参数等）。最直接的做法是什么？

【问题讨论】：

你试过什么？尝试this.context.router.transitionTo 或this.props.history.push 时是否出现错误？

标签： reactjs react-router react-router-v4

【解决方案1】：

树中的任何组件，无论其深度如何，都可以访问react-router 使用的history、location 和match 属性。为此，您必须将组件包装在react-router 提供的withRouter HOC 中。

代码：

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

//define component MyComponent here

export default withRouter(MyComponent);

在上面定义的 MyComponent 中，您可以访问 history 属性并使用 this.props.history.push(newURL); 重定向到任何新 url 您可以在 https://reacttraining.com/react-router/web/api/withRouter 找到更多信息

【讨论】：

与shouldComponentUpdate相关的选项呢，比如：// This gets around shouldComponentUpdate withRouter(connect(...)(MyComponent)) // This does not connect(...)(withRouter(MyComponent)) - 它们有什么用？
您应该向回答该问题的@ShubhamKhatri 询问。或者您可以发布另一个问题。 :)

【解决方案2】：

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

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',
  })
}
...

您还需要确保将新的历史记录传递给路由器以使其正常工作

【讨论】：

“您还需要确保将新历史记录传递给路由器以使其正常工作”是什么意思我已经尝试过这个并且历史记录发生了变化，但组件没有改变如果 II 使用Link
这可能是因为您有 2 个历史实例。您很可能需要在路由器上引用相同的历史记录，例如 import history from 'path/to/history.js' <ConnectedRouter history={history}>