React 路由传参方式

1、state，传参特点：

• 刷新页面后参数不消失
• 参数不会在地址栏显示

跳转方式：
    this.props.history.push({
      pathname:'/home/goodsInfo',
      state: {
        goodsId: goodsId,
      },
    });
跳转页面获取方式参数:
    this.props.location.state.goodsId

2、params和search，传参特点相同：

• 刷新页面后参数不消失
• 参数会在地址栏显示

params跳转方式：
    <Route path='/home/goodsInfo/:goodsId' component={Child1}/>
    <link to="/home/goodsInfo/2">xxx</Link>
    this.props.history.push({pathname:"/home/goodsInfo/" + goodsId});
跳转页面获取方式参数：
    this.props.match.params.goodsId

-------------------------------------------------------------------------------------

search跳转方式：
    <Route path='/home/goodsInfo' component={Child1}/>
    <link to="/home/goodsInfo?goodsId=123">xxx</Link>
    this.props.history.push({pathname:"/home/goodsInfo?goodsId" + 123});
跳转页面获取方式参数：
    this.props.location.search

3、query，传参特点：

• 刷新地址栏，参数会丢失
• 参数不会在地址栏显示，传递参数可传对象

跳转方式：
    <Route path='/home/goodsInfo' component={Query}/>
    <Link to={{ path: '/home/goodsInfo' , query : { goodsId: '123' }}}>
    this.props.history.push({pathname:"/home/goodsInfo",query: { goodsId: '123' }});

跳转页面获取方式参数：
    this.props.location.query.goodsId