如何在react router v4中通过history.push/Link/Redirect传递参数?

在React Router v4中,如何使用this.props.history.push('/page')传递参数

。然后(响应=&gt{
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>相同的道具渲染道具:{匹配,位置,历史}

发表评论