React-router - 如何在url中带参数？在url中带参数的几种方法

---

方法一：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中

基本操作：配置 + 传参 + 取参

1. react-route配置:

const route = {
   
    path: '/myurl/:id',
    component: myUrl,
};

<Route path={
   route.path} component={
   route.component} />

2. 跳转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

3. 获取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