在当前版本的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 4中最简单的方法是使用
this.props.history.push('/new/url');
但是要使用此方法,您现有的组件应该能够访问历史对象。我们可以通过
If your component is linked to Route directly, then your component already has access to history object.
eg:
<Route path="/profile" component={ViewProfile}/>
Here ViewProfile has access to history.
If not connected to Route directly.
eg:
<Route path="/users" render={() => <ViewUsers/>}
Then we have to use withRouter, a heigher order fuction to warp the existing component.
Inside ViewUsers component
import { withRouter } from 'react-router-dom';
export default withRouter(ViewUsers);
That's it now, your ViewUsers component has access to history object.
更新
2-在这个场景中,将所有的路由道具传递给你的组件,然后我们可以从组件中访问this.props.history,即使没有一个HOC
eg:
<Route path="/users" render={props => <ViewUsers {...props} />}
同样的话题也困扰着我。
我使用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,可以使用更简单的动作创建器
如果你正在使用Redux,那么我建议使用npm包react-router-redux。它允许您分派Redux存储导航操作。
你必须在他们的自述文件中创建存储。
最简单的用例:
import { push } from 'react-router-redux'
this.props.dispatch(push('/second page'));
容器/组件的第二个用例:
容器:
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import Form from '../components/Form';
const mapDispatchToProps = dispatch => ({
changeUrl: url => dispatch(push(url)),
});
export default connect(null, mapDispatchToProps)(Form);
组件:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Form extends Component {
handleClick = () => {
this.props.changeUrl('/secondPage');
};
render() {
return (
<div>
<button onClick={this.handleClick}/>
</div>Readme file
);
}
}