- 路由跳转⬅⬅⬅⬅
- 本文主要是路由的传参
文档
- 一旦通过
Route
组件的component
属性指明的组件,那么这个路由组件上面就会有路由相关的api
location
history
match
<Route path="/java/a" component={JavaList}></Route>
在路由跳转的时候传递参数
//传参
<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 值传递给相应的页面(组件)即可
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) //得到 张三