在当前版本的React Router(v3)中,我可以接受服务器响应并使用 browserHistory.push
转到相应的响应页面 . 但是,这还不确定处理这个问题的适当方法是什么 .
在此示例中,使用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的功能重定向到Cart页面?
16 回答
您可以在组件外部使用
history
方法 . 请尝试以下方式 .首先,创建一个
history
对象the history package:然后将其包装在
<Router>
( please note ,你应该使用import { Router }
而不是import { BrowserRouter as Router }
):从任何地方更改您当前的位置,例如:
UPD :您还可以在React Router FAQ中看到略有不同的示例 .
React Router v4与v3(及更早版本)根本不同,你不能像以前那样做
browserHistory.push()
.如果您想要更多信息,This discussion似乎相关:
相反,你有几个选项来做到这一点:
使用withRouter高阶组件
相反,您应该使用
withRouter
高阶组件,并将其包装到将推送到历史记录的组件 . 例如:查看official documentation了解更多信息:
使用上下文API
使用上下文可能是最简单的解决方案之一,但作为实验性API,它不稳定且不受支持 . 仅在其他一切都失败时使用它 . 这是一个例子:
看看上下文中的official documentation:
这就是我做的方式:
使用
this.props.history.push('/cart');
重定向到购物车页面,它将保存在历史记录对象中 .享受,迈克尔 .
根据React Router v4 documentation - Redux Deep Integration session
需要深度整合:
但是,他们建议采用这种方法作为“深度整合”的替代方案:
因此,您可以使用withRouter高阶组件包装组件:
export default withRouter(connect(null, { actionCreatorName })(ReactComponent));
这会将历史API传递给道具 . 所以你可以调用动作创建者将历史作为参数传递 . 例如,在ReactComponent中:
然后,在你的actions / index.js里面:
React路由器V4现在允许使用历史支柱如下:
然后,只要位置prop可用,就可以访问该值,因为
state:{value}
不是组件状态 .你可以像这样使用它来登录和manny不同的东西
讨厌的问题,花了我很多时间,但最终,我这样解决了:
使用
withRouter
包装容器并将历史记录传递给mapDispatchToProps
函数中的操作 . 在操作中使用history.push('/url')进行导航 .行动:
容器:
这适用于 React Router v4.x .
this.context.history.push
无效 .我成功地推动了这样的工作:
在这种情况下,你将道具传递给你的thunk . 所以你可以简单地打电话
如果不是这种情况,您仍然可以从组件中传递历史记录
我提供了一个解决方案,以防其他人有 Value .
我有一个
history.js
文件,其中包含以下内容:接下来,在我定义路由器的Root上,我使用以下内容:
最后,在我的
actions.js
我导入历史记录并使用pushLater这样,我可以在API调用后推送到新的操作 .
希望能帮助到你!
使用回调 . 它对我有用!
在组件中,您只需添加回调
如果您使用的是Redux,那么我建议使用npm package react-router-redux . 它允许您调度Redux商店导航操作 .
您必须按Readme file中所述创建商店 .
The easiest use case:
Second use case with Container/Component:
容器:
零件:
我能够通过使用
bind()
来实现这一目标 . 我想单击index.jsx
中的按钮,将一些数据发布到服务器,评估响应,然后重定向到success.jsx
. 这就是我的工作方式那......index.jsx
:request.js
:success.jsx
:所以通过将
this
绑定到index.jsx
中的postData
,我能够在request.js
中访问this.props.history
...然后我可以在不同的组件中重用此函数,只需要确保我记得在constructor()
中包含this.postData = postData.bind(this)
.这里's my hack (this is my root-level file, with a little redux mixed in there - though I'我没有使用
react-router-redux
):然后我可以在任何我想要的地方使用
window.appHistory.push()
(例如,在我的redux存储函数/ thunks / sagas等中)我曾希望我可以使用window.customHistory.push()
但由于某种原因react-router
似乎永远不会更新,即使网址已更改 . 但这样我就有了react-router
使用的EXACT实例 . 我不是这样做的 . 但它已经见过IMO了 .第一步将您的应用程序包装在路由器
现在我的整个应用程序都可以访问BrowserRouter . 第二步我导入Route然后传递那些道具 . 可能在你的一个主要文件中 .
现在,如果我在组件js文件中运行console.log(this.props),我应该得到一些看起来像这样的东西
第2步我可以访问历史对象来更改我的位置
另外我只是一个编码训练营学生,所以我不是专家,但我知道你也可以使用
如果我错了,请纠正我,但是当我测试它时,它会重新加载整个页面,我认为这打败了使用React的整个过程 .