使用react.push in action creator with react-router-v4?

时间:2018-01-30 05:57:08

标签: reactjs redux react-router react-redux react-router-v4

我发现在没有使用react-router-reduxaction creator async action完成路由的情况下解决此问题的唯一工作方法是将history prop从组件传递给action creator并执行:< / p>

history.push('routename');

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

最好的方法是什么?

1 个答案:

答案 0 :(得分:22)

您可以将BrowserRouter与自定义历史记录(如

)一起使用,而不是使用Router
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>会创建自己的历史记录实例,并会对其进行更改。因此,不同的实例会更改网址,但不会更新<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');
        })
    }
}