react路由传参

路由传参的三种方式

1、params参数

// 1、路由链接（携带参数）
<Link to='/demo/test/tom/18'>详情</Link>
// 2、注册路由，声明接收
<Route path='/demo/test/:name/:age' component={Test} />
// 3、接收参数
const {name, age} = this.props.match.params;

2、search参数

// 1、路由链接（携带参数）
<Link to='/demo/test?name=tom&age=18'>详情</Link>
// 2、注册路由（无需声明，正常注册即可）
<Route path='/demo/test' component={Test} />
// 3、接收参数
this.props.location.search
// 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

3、state参数

// 1、路由链接（携带参数）
<Link to={{pathname: '/demo/test', state: {name: 'tom', age: 18}}}>详情</Link>
// 2、注册路由（无需声明，正常注册即可）
<Route path='/demo/test' component={Test} />
// 3、接收参数
this.props.location.state
// 备注：刷新也可以保留住参数

编程式路由导航

// 1、push跳转+携带params参数
this.props.history.push(`/home/message/detail/${id}/${title}`);
// 2、push+携带search参数
this.props.history.push(`/home/message/detail?id=${id}&title=${title}`);
// 3、push跳转+携带state参数
this.props.history.push('/home/message/detail', {id, title});