最近在使用 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 开发中并不常见。