react的路由传参和接参
传参
//路由传参写在 to 属性后面,必须是一个对象的形式,两个大括号,第一个大括号表示js语法,第二个大括号表示对象,可以传三个参数,pathname:路由名称,search:路径中的参数,state:数据
<NavLink
activeClassName = "active"
to = {
{
pathname:'/home',
search:'a=1&b=2',
state:{ id:1, name: 'baobao' }
}
}
>Home<NavLink>
接参
import React,{Component} from 'react';
class Home extends Component{
// 每一个使用了路由的组件都会被Route包裹起来,每个被Route包裹的组件都会多出几个对象,通过this.props查看
render () {
console.log(this.props)
let his = this.props.location
return (
<div>
Home
<p> { his.pathname } </p>
<p> { his.search } </p>
{/* <p> { his.state.name } </p> */}
</div>
)
}
}
export default Home