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

Question

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

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

如何在v4中实现这一目标。

我知道withRouter当您在Component中时，可以使用hoc ，react上下文或事件路由器props。但对我而言并非如此。

我正在寻找v4中的NavigatingOutsideOfComponents的等效项

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