2021-05-31 react 路由跳转传参 学习总结

• 问号传参(search传参)：

  问号传参属于明文传参。并且当刷新页面的时候参数不会消失。

  <Link to={
      {
  	pathname:'/custom/info',
  	search:'?id=' + value.id //基于问号传参
  	}}>
  	编号：{value.id}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  	姓名:{value.name}
  </Link>
  //编程式传参
  this.props.history.push({
      pathname:'/custom/info',
  	search:'?id=' + value.id
  })
  

  然后在详情页组件这样写：

   //问号传参方案：
  let {location:{search}} = this.props //search会获取到?后面的参数字段
  let id = search.split('=')[1]
  
   return <div>
              {this.props.data.map(function(value,index){
             if(value.id === id){
                 return <li key={index}>
                     编号：{value.id}
                 <br/>
                 姓名：{value.name}
                 </li>