react的路由传参和接参

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