react-router总结之路由传值

react项目中一般都会使用到react-router,以下是常用的3种传值和接收值的方式,可以根据不同需求场景进行选择使用,在此记录一下,方便以后查阅!

第一种 浏览器地址栏看的到数据

// 设置路由的时候配置
xxx/xxxx/edit/:id
// 接收到id
this.props.match.params.id

第二种 浏览器地址栏看的不到数据

// 传值
   this.props.history.push({
            pathname: '/admin/violation/edit',
            state: record
        });
// 接收
this.props.location.state

第三种 浏览器地址栏看的到数据

// 传值
    this.props.history.push({
            pathname: '/admin/violation/edit',
            state: record,
            search: `a=${record.id}`
        });
// 接收
this.props.location.search