在带有 react-router-v4 的 action creator 中使用 history.push?

Use history.push in action creator with react-router-v4?

我发现在不使用 react-router-reduxaction creator async action 完成路由的情况下解决这个问题的唯一工作方法是将 history 道具从组件传递给动作创建者并做:

history.push('routename');

由于 BrowserRouter 忽略传递给它的 history 属性,因此我们不能将自定义历史对象与 browserhistory 一起使用。

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

您可以使用带有自定义历史记录的 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');
        })
    }
}