REACT的路由传参

在Route定义渲染组件时给定动态绑定的参数。
React路由传参方式有三种：

• 动态路由参数（param）
  以“/detail/:id”形式传递的数据
  在落地组件中通过this.props.match.params得到
• 查询字符串（search）
  通过地址栏中的 ?key=value&key=value传递
  在落地组件中通过this.props.location.search得到
• 隐式传参（state），通过地址栏是观察不到的
  通过路由对象中的state属性进行数据传递
  在落地组件中通过this.props.location.state得到

params参数

复制//路由链接(携带参数)：
<Link to='/student/zhuxiaoming/18'}>朱小明</Link>
//或 <Link to={{ pathname: '/student/zhuxiaoming/18' }}>朱小明</Link>

//注册路由(声明接收)：
<Route path="/student/:name/:age" component={Test}/>

• 代码中跳转

复制this.props.history.push('/student/zhuxiaoming/18');

• 组件内访问：

复制console.log(this.props.match.params);  // { name: 'zhuxiaoming', age: 18 }

search参数

复制//路由链接(携带参数)：
<Link to='/student/?name=zhuxiaoming&age=18'}>朱小明</Link>

//注册路由(无需声明，正常注册即可)：
<Route path="/student" component={Student}/>

• 代码中跳转

复制this.props.history.push('/student/?name=zhuxiaoming&age=18');
this.props.history.push({pathname: '/cart', query: {name: 'zhuxiaoming', age: 18}});

• 组件内访问：

复制import qs from "querystring";
const { name ,age} = qs.parse(this.props.location.search.slice(1)); // { name: 'zhuxiaoming', age: 18 }
//备注：获取到的search是urlencoded编码字符串(例如: ?id=10&name=zhangsan)，需要借助query-string解析参数成对象

state参数

复制//路由链接(携带参数)：
<Link to={{ pathname:'/student',state: { name:'zhuxiaoming',age:18 } }}>朱小明</Link>

//注册路由(无需声明，正常注册即可)：
<Route path="/student" component={Student}/>

//备注：刷新也可以保留住参数

• 代码中跳转

复制this.props.history.push({pathname: '/student', state: { name:'zhuxiaoming',age:18 }});

• 组件内访问：

复制//接收参数：
this.props.location.state // { name: 'zhuxiaoming', age: 18 }