react路由传参方式和区别

1.query

 history.push({
              pathname:'/admin/detail',
              query:{
                 itemInfor:record
              }
             });

获取传递的参数

console.log(props.location.query);

跳转前后浏览器URL变化：
前：‘某某某’
后：‘某某某?itemInfor=%object%20Object%5D’
刷新后传递过来的数据会丢失，必须回到之前页面重新点进去

2.state

history.push('/admin/detail',
              {appid}）

 console.log(props.location.state);

跳转前后浏览器URL没变化
跳转后的页面点击刷新传过来的数据不会丢失

3.路由表配置

{
        path: '/admin/detail/:appid',
        component: './polyDetail/polyDetailPage',
      },

        history.push(`/admin/detail/${appid}`);

       console.log(this.props.match.params.appid)

跳转前后浏览器URL变化：
前：‘某某某’
后：‘某某某wx1a71fe0257723eb0’ //后面的是 appid的值
跳转后的页面点击刷新传过来的数据不会丢失