我发现在没有使用react-router-redux
从action creator async action
完成路由的情况下解决此问题的唯一工作方法是将history
prop从组件传递给action creator并执行:< / p>
history.push('routename');
由于BrowserRouter
忽略了传递给它的历史道具,因此我们不能将自定义历史对象与browserhistory一起使用。
最好的方法是什么?
答案 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');
})
}
}