大佬教程收集整理的这篇文章主要介绍了如何在React Router v4中推送到历史记录？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
您可以在history组件外部使用这些方法。通过以下方式尝试。
首先，history使用历史记录包创建一个对象：
// src/history.Js
import { createbrowserHistory } from 'history';
export default createbrowserHistory();
然后将其包装<Router>（ ，您应该使用import { Router }而不是import { browserRouter
as Router }）：
// src/index.Jsx
// ...
import { Router, Route, link } from 'react-router-dom';
import history from './history';
ReactDOm.render(
<ProvIDer store={storE}>
<Router history={history}>
<div>
<ul>
<li><link to="/">Home</link></li>
<li><link to="/login">Login</link></li>
</ul>
<Route exact path="/" component={HomePagE} />
<Route path="/login" component={LoginPagE} />
</div>
</Router>
</ProvIDer>,
document.getElementByID('root'),
);
从任何地方更改当前位置，例如：
// src/actions/userActionCreators.Js
// ...
import history from '../history';
export function login(credentials) {
return function (dispatch) {
return loginRemotely(credentials)
.then((responsE) => {
// ...
history.push('/');
});
};
}
：您还可以在React Router FAQ中看到一个稍微不同的示例。
在当前版本的React
Router（v3）中，我可以接受服务器响应并用于browserHistory.push转到相应的响应页面。但是，这在v4中不可用，我不确定哪种适当的处理方式。
在此示例中，使用Redux，当用户提交表单时， components / app-product-form.js
调用this.props.addProduct(props)。服务器返回成功后，该用户将被带到“购物车”页面。
// 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 v4中推送到历史记录？全部内容，希望文章能够帮你解决如何在React Router v4中推送到历史记录？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。