react-router4怎么在非组件内进行路由跳转

Question

在axios的请求拦截里需要做路由跳转，不在组件内部
尝试使用
import createHistory from 'history/createBrowserHistory'
createHistory().push('/path')
这个方式，url会变化，页面不会更新

Answer 1

1. 使用connected-react-redux， 将store传入进去，直接

import { push } from 'connected-redux-router'

store.dispatch(push('/path'))

1. 直接使用使用window.location = '/xxx'跳转
2. 传入history 在创建Router对象传入的history对象

Answer 2

我也遇到这个问题了，我是这么解决的，在根组件（App.jsx）中将history挂到windows上，这样在任意地方都能通过windows获取history对象，然后就能正常跳转了。

// App.jsx
constructor(props) {
    super(props);
    this.state = {};
    window.reactHistory = this.props.history;
}

// 任意地方使用
window.reactHistory.push("/")

Answer 3

将history抽取到全局单例：

// /browserHistory.js
import createHistory from 'history/createBrowserHistory'
export default createHistory()

路由定义：

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

function App(props) {
  return <Router history={history}>{props.children}</Router>
}

在外部进行路由导航：

// foo.js
import history from './browserHistory'

function goBack() {
  history.goBack()
}