如何获取 react-router v4 的历史记录？

Question

我从 React-Router v3 迁移到 v4 时遇到了一些小问题。在 v3 中，我可以在任何地方执行此操作：

 import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

如何在 v4 中实现这一点。

我知道当您在组件中时，我可以使用 hoc withRouter 、反应上下文或事件路由器道具。但对我来说不是这样。

我正在寻找 v4 中 NavigatingOutsideOfComponents 的等价物

原文由 storm_buster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你只需要一个模块来导出一个 history 对象。然后，您将在整个项目中导入该对象。

 // history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})

然后，您将使用 <Router> 组件，而不是使用内置路由器之一。

 // index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)

 // some-other-file.js
import history from './history'
history.push('/go-here')

原文由 Paul S 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这行得通！ https://reacttraining.com/react-router/web/api/withRouter

 import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  render () {
    this.props.history;
  }
}

withRouter(MyComponent);

原文由 Justin Yueh 发布，翻译遵循 CC BY-SA 4.0 许可协议