在带有 react-router-v4 的 action creator 中使用 history.push?
Use history.push in action creator with react-router-v4?
我发现在不使用 react-router-redux
从 action 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');
})
}
}
我发现在不使用 react-router-redux
从 action 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');
})
}
}