React-Router传递参数

1. params

• 路由链接（携带参数）：<Link to="/demo/test/tom/18">详情</Link>

<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>

• 注册路由（声明接收）：<Route path="/demo/test/:name/:age" component={Test} />

<Route path="/home/message/detail" component={Detail} />

• 接收参数：this.props.match.params

const { id, title } = this.props.match.params;

2. search

• 路由链接（携带参数）：<Link to="/demo/test?name=tom&age=18">详情</Link>

<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>

• 注册路由（无需声明，正常注册即可）：<Route path="/demo/test" component={Test} />

<Route path="/home/message/detail" component={Detail} />

• 接收参数：this.props.location.search

  获取到的search是urlencoded编码字符串，需要借助querystring解析

import qs from 'querystring';
const { search } = this.props.location;
const { id, title } = qs.parse(search.slice(1));

3. state

• 路由链接（携带参数）：<Link to={{ pathname: '/demo/test', state: { name: 'tom', age: 18 } }}>详情</Link>

<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>

• 注册路由（无需声明，正常注册即可）：<Route path="/demo/test" component={Test} />

<Route path="/home/message/detail" component={Detail} />

• 接收参数：this.props.location.state

const { id, title } = this.props.location.state || {};

---

欢迎在我的博客上访问：
https://lzxjack.top/