在 react-router-v4 中使用 history.push in action creator？

Question

我发现在不使用react-router-redux 从action creator async action 完成路由的情况下解决此问题的唯一工作方法是将组件中的history 道具传递给动作创建者并执行以下操作：

history.push('routename');

由于BrowserRouter 忽略了传递给它的历史道具，因此我们不能将自定义历史对象与浏览器历史记录一起使用。

解决这个问题的最佳方法是什么？

Answer 1

您可以使用带有自定义历史记录的Router，而不是使用BrowserRouter

import { Router } from 'react-router'

import createBrowserHistory from 'history/createBrowserHistory'

export const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

在这种情况下，您的 history.push() 将起作用。使用 BrowserRouter history.push 不起作用，因为创建一个新的 browserHistory 将不起作用，因为 <BrowserRouter> 创建了自己的历史实例，并监听其变化。所以不同的实例会改变 url 但不会更新<BrowserRouter>。

创建自定义history 后，您可以将其导出，然后将其导入您的action creator 并使用它来动态导航

import { history } from '/path/to/index';

const someAction = () => {
    return dispatch => {
        ApiCall().then((res) => {
            dispatch({type: 'SOME_CALL', payload: res })
            history.push('/home');
        })
    }
}