在当前版本的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)
。然后(响应=>{
分派({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();
然后将其包装在<;路由器>
(请注意,您应该使用导入{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”导入历史记录;
导出功能登录(凭据){
返回功能(调度){
远程返回登录(凭据)
。然后((响应)=>{
// ...
历史推送(“/”);
});
};
}
UPD:您还可以在React路由器常见问题解答中看到一个稍有不同的示例