React-Router5-路由组件参数传递

1. params参数

• 从News组件通过声明式导航跳转到Detail组件，需要在声明式导航组件<Link/>中指定Detail组件的URL以及携带的参数

<Link to={`/detail/${this.state.id}`}>去Detail</Link>

• Detail组件路由需要预留占位符接收参数

{
    path: "/detail/:id",
    element: <Detail />,
  },
  {
    path: "/news",
    element: <News />,
  },

• Detail组件内可以通过this.props.match.params获取到News组件传递的对象（截图是Router6版本，所以this.props里为空，该版本推荐使用函数组件的hook）
  

2. search参数（query参数）

• 接收search参数的组件不需要声明
• 需要引入querystring解析

let str = 'name=lisi&age=22';
queryString.parse(str) //{name:"lisi",age:22}

let obj = {name:"lisi",age:22}
queryString.stringify(obj ) //  name=lisi&age=22

• search返回的字符串是带？的，需要自己截取？后面的，再通过queryString解析成对象
• subString(1)和sclice(1)都可以截取？之后的字符串
  

3. state参数

• 接收state参数也无需在路由里声明
• 声明式导航组件的to属性里有两个参数pathname和state，state用于存放想要传递的对象
• 接收state参数的组件可以从this.props.location.state身上拿到传递的对象
  

4. 总结

• 使用param参数和search参数查询，刷新页面，参数不会丢失，因为参数都在url上
• 使用state参数刷新页面参数也不会丢失，是因为浏览器的history对象身上有缓存，如果清理缓存，则数据会丢失（history对象里有location对象，locationd对象里有state，所以只要history对象不丢，state参数就不会丢）