React中向路由组件传递参数

1. params参数

路由链接（传递参数）：

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

注册路由（声明接收）：

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

接收参数：
const {id,title}=this.props.match.params;

params参数

使用params传递参数地址栏的链接时这样的；
http://localhost:3000/home/message/detail/01/消息1

2. search参数

路由链接（传递参数）：

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

注册路由（无需声明，正常注册即可）：

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

接收参数：

const {search}=this.props.location;
console.log(search);//?id=01&title=消息1
const {id,title}=qs.parse(search.slice(1));//去除问号

search参数

注意：获取到的search是urlencoded编码的字符串，需要借助querystring解析
react库自带，可直接引入：import qs from "querystring";

search传递参数在地址栏的链接是这样的：
http://localhost:3000/home/message/detail/?id=01&title=消息1

3. state参数

路由链接（传递参数）：

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

注册路由（无需声明，正常注册即可）：

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

接收参数：
const {id,title}=this.props.location.state || {};

state参数

注意：
由于传递的参数没有在地址栏体现，所以刷新会出错，需要在接收参数时进行空对象处理。
state传递参数不会在地址栏体现，地址栏是这样的：
http://localhost:3000/home/message/detail

总结：

三种传递参数的方式中，params用的最多，其次是search，最后是state。
当需要传递参数却有不想展示时会使用state方式传递。