在当前版本的React Router (v3)中，我可以接受服务器响应并使用browserHistory。点击进入相应的响应页面。但是，这在v4中是不可用的，我不确定处理它的适当方法是什么。
在这个例子中，使用Redux, components/app-product-form.js在用户提交表单时调用this.props. addproduct (props)。当服务器返回成功时，用户将被带到Cart页面。
// actions/index.js
export function addProduct(props) {
return dispatch =>
axios.post(`${ROOT_URL}/cart`, props, config)
.then(response => {
dispatch({ type: types.AUTH_USER });
localStorage.setItem('token', response.data.token);
browserHistory.push('/cart'); // no longer in React Router V4
});
}
如何从React Router v4的函数重定向到购物车页面?
同样的话题也困扰着我。
我使用react-router-dom 5, Redux 4和BrowserRouter。
我更喜欢基于功能的组件和钩子。
像这样定义组件
import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";
const Component = () => {
...
const history = useHistory();
dispatch(myActionCreator(otherValues, history));
};
你的动作创造者紧随其后
const myActionCreator = (otherValues, history) => async (dispatch) => {
...
history.push("/path");
}
当然，如果不需要async，可以使用更简单的动作创建器
这个棘手的问题，花了我很多时间，但最终，我是这样解决的:
用withRouter包装容器，并将历史记录传递给mapDispatchToProps函数中的动作。实际操作中使用history.push('/url')进行导航。
行动:
export function saveData(history, data) {
fetch.post('/save', data)
.then((response) => {
...
history.push('/url');
})
};
容器:
import { withRouter } from 'react-router-dom';
...
const mapDispatchToProps = (dispatch, ownProps) => {
return {
save: (data) => dispatch(saveData(ownProps.history, data))}
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Container));
这对React Router v4.x有效。
创建一个带有自己的browserHistory的自定义路由器:
import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();
const ExtBrowserRouter = ({children}) => (
<Router history={history} >
{ children }
</Router>
);
export default ExtBrowserRouter
接下来，在你定义路由器的根目录上，使用以下命令:
import React from 'react';
import { /*BrowserRouter,*/ Route, Switch, Redirect } from 'react-router-dom';
//Use 'ExtBrowserRouter' instead of 'BrowserRouter'
import ExtBrowserRouter from './ExtBrowserRouter';
...
export default class Root extends React.Component {
render() {
return (
<Provider store={store}>
<ExtBrowserRouter>
<Switch>
...
<Route path="/login" component={Login} />
...
</Switch>
</ExtBrowserRouter>
</Provider>
)
}
}
最后，在需要的地方导入历史记录并使用它:
import { history } from '../routers/ExtBrowserRouter';
...
export function logout(){
clearTokens();
history.push('/login'); //WORKS AS EXPECTED!
return Promise.reject('Refresh token has expired');
}
使用回调。这对我很管用!
export function addProduct(props, callback) {
return dispatch =>
axios.post(`${ROOT_URL}/cart`, props, config)
.then(response => {
dispatch({ type: types.AUTH_USER });
localStorage.setItem('token', response.data.token);
callback();
});
}
在组件中，你只需要添加回调
this.props.addProduct(props, () => this.props.history.push('/cart'))
根据React Router v4文档- Redux深度集成会话
深度整合需要:
“能够通过调度操作进行导航”
然而，他们推荐这种方法作为“深度集成”的替代方案:
“你可以将提供给路由组件的历史对象传递给你的操作，而不是分派操作来导航。”
所以你可以用withRouter高阶组件来包装你的组件:
export default withthrouter (connect(null， {actionCreatorName})(ReactComponent));
它将历史API传递给道具。你可以调用动作创建者传递历史作为参数。例如，在你的ReactComponent中:
onClick={() => {
this.props.actionCreatorName(
this.props.history,
otherParams
);
}}
然后，在actions/index.js中:
export function actionCreatorName(history, param) {
return dispatch => {
dispatch({
type: SOME_ACTION,
payload: param.data
});
history.push("/path");
};
}
