react/Ant Design路由的参数的使用以及获取参数（this.props.params）

React中实现

Ant Design是基于react的框架。所以我们基于react传递参数：

import List from './component/list';

<Route path="list/:id" component={List} />

注意
path: 属性中的:id就是该路由的参数（param）。

在List组件中，可以直接通过（this.props.params）.id来访问实际的参数值（这里的id key就和定义路径的:id相对应），React Router将路由的数据都通过props传递给了页面组件。

import React from 'react';
class List extends React.Component {
    render () {
        return (
            <div>
                <h3>This is List page.</h3>
                <p>The list page id is 
                    <b style={{color: 'red'}}>{this.props.params.id}</b>
                </p>
            </div>
        );
    }
};

Ant Design中实现

但是在Ant Design中，this.props.params参数是不存在的，可以使用this.props.match.params.id来获取，需要添加match参数。

Ant Design获取Url参数

比如我们通过a?name=1&b=3,通过substr截取长度即可获得参数！

const query = this.props.location.search;
const parrmas = query.split('&');
const name = parrmas[0].substr(5);
const status = parrmas[1].substr(2);