react——向路由组件传输参数的三种方式

  • 时间:
  • 浏览:
  • 来源:互联网

1.传输params参数

  1. Link代码
<NavLink
  activeClassName="acc"
  to={`/Page2/Div1/${messageObjs[0].id}`}
>
  1. Route代码
<Route path="/Page2/Div1/:messageObjs" component={Div1}></Route>
  1. 接收的参数所在位置
    this.props.match.params

2.传输search参数

  1. Link代码
<NavLink
  activeClassName="acc"
  to={`/Page2/Div1/?id=1&message=你好呀`}
>
  1. Route代码
<Route path="/Page2/Div1" component={Div1}></Route>
  1. 接收的参数所在位置的代码
    this.props.location.search
  2. 注意:接收到的参数为?id=1&message=你好呀,要将其转化为对象需要使用querystring解析
  3. 解析的代码
render() {
  //获取search
  const {search} = this.props.location;
  //将"?id=1&message=今天天气真不错"这行字符串去掉?后转化成为对象
  const {id,message} = qs.parse(search.slice(1))
  
  return <div>{`${id}+${message}`}</div>;
}

3.传输state参数

  1. Link代码
<NavLink
  activeClassName="acc"
  to={{
    pathname: `/Page2/Div1`,
    state: { id: 1, message: "今天天气真不错" },
  }}
>
  1. Route代码
<Route path="/Page2/Div1" component={Div1}></Route>
  1. 参数位置
    this.location.state || this.history.location.state

本文链接http://www.dzjqx.cn/news/show-617353.html