在React Router v4中,如何使用this.props.history.push('/page')
传递参数
。然后(响应=>{
var r=这个;
如果(response.status>;=200&;response.status<;300){
r、 props.history.push('/template');
});
首先,您不需要执行var r=this;
,因为在if语句中,这是指回调本身的上下文,因为您使用的是arrow函数,它指的是React组件上下文
根据文件:
历史对象通常具有以下属性和方法:
- 长度-(number)历史堆栈中的条目数
- 操作-(字符串)当前操作(推送、替换或弹出)
位置-(对象)当前位置。可能具有以下属性:
- 路径名-(字符串)URL的路径
- 搜索-(字符串)URL查询字符串
- 哈希-(字符串)URL哈希片段
- 状态-(字符串)在将此位置推送到服务器上时提供给的特定于位置的状态,例如推送(路径、状态)
堆栈。仅在浏览器和内存历史记录中可用- push(path,[state])-(函数)将新条目推送到历史堆栈上
- replace(路径,[state])-(函数)替换历史堆栈上的当前条目
- go(n)-(函数)将历史堆栈中的指针移动n个条目
- goBack()-(函数)相当于go(-1)
- goForward()-(函数)相当于go(1)
- 阻止(提示)-(功能)阻止导航
因此,在导航时,您可以向历史对象传递道具,如
this.props.history.push({
路径名:'/template',
搜索:‘?查询=abc’,
状态:{detail:response.data}
})
或者类似地,对于链接
组件或重定向
组件
链接到={{
路径名:'/template',
搜索:‘?查询=abc’,
状态:{detail:response.data}
}}>;我的链接<;/Link>;
然后在使用/template
路径呈现的组件中,您可以访问传递的道具,如
this.props.location.state.detail
还要记住,当使用props中的历史记录或位置对象时,您需要将组件与路由器连接起来
根据文件:
带路由器
您可以访问历史对象的属性和最近的
<;Route>;
通过与路由器
高阶组件进行匹配。与路由器
将在每次管线更改时重新渲染其组件
与<;Route>;
相同的道具渲染道具:{匹配,位置,历史}