内容简介
方法一:url params - 形如/myurl/:id
1. 基本介绍
把route设成这样👇 | 访问下面的url👇 |
---|---|
/myurl/:id | http://localhost:80/myproject/#/myurl/1 |
即可知道参数id的值:1
2. 通过this.props.match.params获取参数
- 当使用react-router时, 会把match注入到this.props中
基本操作:配置 + 传参 + 取参
- react-route配置:
const route = {
path: '/myurl/:id',
component: myUrl,
};
<Route path={
route.path} component={
route.component} />
- 跳转url时携带参数的方法:
(就把id的值放在url里面就可以了)
// 方法一
this.props.history.push('/myurl/1');
// or
// 方法二
const id = 1;
this.props.history.push(`/myurl/${
id}`);
即,跳转到该url: http://localhost:80/myproject/#/myurl/1
- 获取params:
通过this.props.match获取,console.log(this.props.match):
它长这样
so 这样子获取参数:
const {
id } = this.props.match.params // id = 1
添加多个参数
方法1. /myurl/:id/:name
route:
{
path: '/myurl/:id/:name',
component: myUrl,
},
访问url:
http://localhost:80/myproject/#/myurl/1/chris
获取params:
const {
id, name } = this.props.match.params;
// id = 1, name = chris
方法2. /myurl/:params
route:
{
path: '/myurl/:manyParams',
component: myUrl,
},
访问url:
const params = {
id: 2, name: 'chris' };
this.props.history.push(`/myurl/${
JSON.stringify(params)}`);
获取params:
const {
m