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