reactjs - 在带有react-router-v4的 Action 创建器中使用history.push？

Question

我发现在不使用 react-router-redux 从 action 创建者异步操作 完成路由的情况下解决此问题的唯一工作方法是传递 历史从组件到 Action 创建者的 Prop 并执行:

history.push('routename');

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

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

Answer 1

而不是使用 BrowserRouter您可以使用 Router具有自定义历史记录，例如

import { Router } from 'react-router'

import createBrowserHistory from 'history/createBrowserHistory'

export const history = createBrowserHistory()

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

在这种情况下你的 history.push()将工作。使用浏览器路由器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');
        })
    }
}