当前位置： 移动技术网 > IT编程>开发语言>Java > react 路由react-router跳转 / react-router-dom 参数的传递

react 路由react-router跳转 / react-router-dom 参数的传递

2020年07月17日  | 移动技术网IT编程  | 我要评论

文档

  • 一旦通过Route组件的component属性指明的组件，那么这个路由组件上面就会有路由相关的api
    • location
    • history
    • match
<Route path="/java/a" component={JavaList}></Route>
  1. 在路由跳转的时候传递参数
//传参
<Route path='/Java' render={()=>{
  return <Java x={100}></Java>
   }
}></Route>

//接收参数
console.log(this.props.xxx)
  • 使用 render 渲染进行
  • 在渲染的组件内传值即可
    在这里插入图片描述

可以看到传递的参数，但是本该有的 像第一条的方法并没有获得到，这是因为这样传递参数并不能将当前 this 传递过去，这是需要传递过去

<Route path='/Java' render={(routerProps)=>{
  return <Java {...routerProps} x={100}></Java>
   }
}></Route>
  • render 的 （） 里面会自动接收当前this ，只需要把这个this 值传递给相应的页面(组件)即可
  1. link的参数传递（重要）

1.通过动态路由的方式进行参数传递 :id

//传参
<div>
     <li><NavLink to="/java/1" activeStyle={{color:"red"}}>点击跳转</NavLink></li>
     <Route path="/java/:id" component={JavaList}></Route>
</div>
  • 通过 xxx 跳转传递
  • 通过 :id 判断传递的数据
//跳转到的组件接收参数
console.log(this.props.match.params.id)  //得到 1

在这里插入图片描述

2.通过query进行传参 ?xxx=xxx

//传递参数
<div>
     <li><NavLink to="/java/a?title=张三" activeStyle={{color:"red"}}>点击跳转</NavLink></li>
        <Route path="/java/a" component={JavaList}></Route>
</div>

//接收参数
console.log(this.props.location.search)  //得到 ?title=张三

在这里插入图片描述

3.通过state进行隐式传参 to={{pathname:"/xxx",state:{key:vlaue}}}

//传递参数
<div>
     <li><NavLink to={{
         pathname:"/java/a",
         state:{
             title:"张三"
         }
     }} activeStyle={{color:"red"}}>点击跳转</NavLink></li>
        <Route path="/java/a" component={JavaList}></Route>
</div>

//接收参数
cosole.log(this.props.location.state.title)  //得到 张三

在这里插入图片描述

本文地址：https://blog.csdn.net/qq_44163269/article/details/107390238

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网