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

• 路由跳转⬅⬅⬅⬅
• 本文主要是路由的传参

文档

• gitHub介绍网址
• react-router 官网
• react-router 中文文档

---

• 一旦通过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 值传递给相应的页面(组件)即可

2. 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)  //得到 张三