如何在React Router v4中推送历史?

在当前版本的React Router(v3)中,我可以接受服务器响应并使用browserHistory.push进入相应的响应页面。然而,这在v4中是不可用的,我不确定处理这个问题的合适方法是什么

在本例中,当用户提交表单时,使用Redux,components/app product form.js调用this.props.addProduct(props)。当服务器返回成功时,用户被带到购物车页面

//actions/index.js
导出功能添加产品(道具){
退货派送=>
post(`${ROOT\u URL}/cart`,props,config)
。然后(响应=&gt{
分派({type:types.AUTH_USER});
setItem('token',response.data.token);
browserHistory.push('/cart');//不再在React Router V4中
});
}

如何从React Router v4的函数重定向到购物车页面

您可以在组件之外使用history方法。试着用下面的方法

首先,创建一个使用历史记录包的history对象:

//src/history.js
从“历史”导入{createBrowserHistory};
导出默认createBrowserHistory();

然后将其包装在<路由器&gt请注意,您应该使用导入{Router}而不是导入{BrowserRouter as Router}):

//src/index.jsx
// ...
从“react Router dom”导入{Router,Route,Link};
从“./history”导入历史记录;
ReactDOM.render(
<提供程序存储={store}>
<路由器历史={history}>
<div>
<ul>
<li>lt;链接到=“/”>主页</Link>lt;/li>
<li>lt;链接到=“/login”>登录</Link>lt;/li>
</ul>
<Route exact path=“/”组件={HomePage}/>
<路由路径=“/login”组件={LoginPage}/>
</div>
</Router>
</Provider>,
document.getElementById('root'),
);

从任何位置更改当前位置,例如:

//src/actions/userActionCreators.js
// ...
从“../history”导入历史记录;
导出功能登录(凭据){
返回功能(调度){
远程返回登录(凭据)
。然后((响应)=&gt{
// ...
历史推送(“/”);
});
};
}

UPD:您还可以在React路由器常见问题解答中看到一个稍有不同的示例

发表评论