React路由组件三种传参方式分析讲解_React

//传值
<Link to='/home?name=张三&age=18'>主页面</Link>
//接收
<Route path='/home' component={home}></Route>

    componentDidMount(){
        console.log(this.props.history.location.search);
        let a=this.props.history.location.search.slice(1)
        let b=a.split('&')
        console.log(b);
        let obj={}
        b.forEach((item)=>{
        item.split('=')
        obj[item.split('=')[0]]=item.split('=')[1]
     })
   console.log(obj);
    }

    componentDidMount(){
        let a=this.props.history.location.search.slice(1)
        console.log(querystring.parse(a));       
    }

//传值
<Link to='/login/zhangsan/18'>登录</Link>
//接收
<Route path='/login/:name/:age' component={login}></Route>

    componentDidMount(){
        // console.log(this.props);
        console.log(this.props.match.params);
    }

//传值
  <Link to={{pathname:'/zhuce',user:{name:'张三',age:19}}}>注册页面</Link>
//接收
  <Route path='/zhuce' component={zhuce}></Route>

componentDidMount(){
        console.log(this.props.location.user);
    }

export default class home extends Component {
    onchange=()=>{
        this.props.history.push('/home/?name=张三&age=19')
      }
  render() {
    return (
      <div>
        <button onClick={()=>{this.onchange()}}>点击跳转到home页</button>
      </div>
    )
  }
}

<Link to='/home?name=张三&age=18'>主页面</Link>

<Redirect to='/'></Redirect>