项目笔记 | React 路由传参的两种常用方式

453 阅读2分钟

最近在使用 React 做项目时,遇到了 React 路由传值的问题,最终成功解决。下面总结了两种常用 React 路由传值的解决方法。

1 路径传值

这种传值方式比较常见,其形式为 /someroute/:param1/:param2

优点:

  • 定义简单
  • 使用方便

不足:

  • url 冗长
  • 数据暴露
  • 只能传基本类型,对象等类型难以传值

使用方法:

  • 在路由定义页面
// --------------上方为其他逻辑代码----------------------
<Route path="/someroute/:param1/:param2"></Route>
// --------------下方为其他逻辑代码----------------------
  • 在导航页面
// --------------上方为其他逻辑代码----------------------
<Link to="/someroute/var1/var2"></Link>
// --------------下方为其他逻辑代码----------------------
  • 在新的页面
// --------------上方为其他逻辑代码----------------------
第一个参数为:{this.props.location.match.param1}
第二个参数为:{this.props.location.match.param2}
// --------------下方为其他逻辑代码----------------------

2 state 传值

这种传值方式在待传参数较多或参数类型较为复杂时比较常用。

优点:

  • 数据不会暴露在 url 中
  • 解决了对象等类型数据的路由传值问题

不足:

  • 在新的页面点击刷新,之前传来的值不会保留

解决方案:

  • 使用 state 传值 + sessionStorage 存储参数

使用方法:

  • 在路由定义页面
// --------------上方为其他逻辑代码----------------------
<Route path="/someroute"></Route>
// --------------下方为其他逻辑代码----------------------
  • 在导航页面
// --------------上方为其他逻辑代码----------------------
<Link to={{ pathname: '/someroute', state: { param1: var1, param2: var2 } }}></Link>
// --------------下方为其他逻辑代码----------------------
  • 在新的页面
// --------------在 constructor 中----------------------
if (this.props.location.state) {
    // 保证第一次传参到新的页面时再更改 sessionStorage
    window.sessionStorage.setItem('param1', this.props.location.state.param1);
    window.sessionStorage.setItem('param2', this.props.location.state.param2);
}
// -------------- constructor 结束----------------------
// -----------------------------------------------------
// --------------上方为其他逻辑代码----------------------
第一个参数为:{window.sessionStorage.getItem('param1')}
第二个参数为:{window.sessionStorage.getItem('param2')}
// --------------下方为其他逻辑代码----------------------

3 总结

以上两种方式可以满足一般项目对于路由传参的需求。

另外还有一种方式,可以通过 Redux 统一管理一个全局路由对象,每次需要传参时对该对象进行操作。这种思路在小程序的路由传参中可能会用到,在 Web 开发中并不常见。