react 路由跳转传参 路由传参学习总结

对于 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>
             }
         })}
  </div>
  

• 基于query传值：

  query的形式传参，无论在那一个模式下，当我们刷新浏览器的时候都会消失，这有别于state。

  //query方法：参数地址栏不显示，刷新地址栏，参数丢失
  <Link to={{
  	pathname:'/custom/info',
     	query:value.id 
  	}}>
  	编号：{value.id}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  	姓名:{value.name}
  </Link>
  //编程式传参
  this.props.history.push({
      pathname:"/custom/info",//要跳转的路径
      query:{
          id:value.id
      }
  })
  

  let id = this.props.location.query
  
   return <div>
              {this.props.data.map(function(value,index){
             if(value.id === id){
                 return <li key={index}>
                     编号：{value.id}
                 <br/>
                 姓名：{value.name}
                 </li>
             }
         })}
  </div>
  

  其实当我们打印this.props.location的时候，我们会发现并没有query这个属性名。其实这个名字属于自定义参数名。也就是说我们可以自己命名参数，然后将该参数通过路由来传递，我们可以将query命名为myquery都没有问题。但是，因为是自己命名的参数，无论在哪种模式下，其实react-router都不会去保存的。总结，query传参属于自主命名传参，不属于react-router的标准，但是也能传参。

• 基于state传参：

  在这里需要注意的是，我们在哈希路由的模式下，我们传递的state参数是不会保存的，刷新浏览器之后便会消失。当我们切换到浏览器模式下的时候，当我们刷新浏览器的时候，state是不会消失的。

  //参数地址栏不显示，刷新地址栏，参数丢失
  <Link to={{
  	pathname:'/custom/info',
      state:value.id //基于state传值方案（一旦页面刷新，上次传递的state就会消失）
  	}}>
  	编号：{value.id}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  	姓名:{value.name}
  </Link>
  //编程式传参
  this.props.history.push({
      pathname:"/custom/info",
      state:value.id
  })
  

  详情页组件这样写：

   //基于state传值
  let id = this.props.location.state//这种方式比较简便，不用进行字符解析
  
   return <div>
              {this.props.data.map(function(value,index){
             if(value.id === id){
                 return <li key={index}>
                     编号：{value.id}
                 <br/>
                 姓名：{value.name}
                 </li>
             }
         })}
  </div>
  

• 基于动态URL地址传参(也成为params传参)：

  路由匹配如下：

  <Route path="/custom/info/:id" component={Info} />
  

  跳转组件如下：

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

  详情页组件如下：

  let {match} = this.props
  let id = match.params.id
  
   return <div>
              {this.props.data.map(function(value,index){
             if(value.id === id){
                 return <li key={index}>
                     编号：{value.id}
                 <br/>
                 姓名：{value.name}
                 </li>
           }
         })}
  </div>
  

这这里说一下为什么基于URL地址传参要改变我们的路由匹配规则，原理是这样的。首先当我们点击跳转组件的时候，它会将我们的导航栏中的地址改为我们指定的地址，例如上面的：/custom/info/${value.id}。我们假设value.id === 1。那么此时的地址为：/custom/info/1。当路由地址改变后就会引发路由组件的重新匹配，因为我们的路由是这样写的：

<Route path="/custom/info/:id" component={Info} />

所以该路由组件会匹配上。而/1在该组件内部会被解析为传递的参数，将其单独提取出来，然后放到该组件的this.props.location.match.params对象中。这样我们就可以拿到传递的值了。

这是在学习react路由时候的一些总结，如果有误请指出，一起学习讨论。