react hooks 路由传参适合刚学习的你

原创

已于 2023-07-18 08:48:22 修改 · 693 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #javascript

于 2023-07-17 11:50:16 首次发布

这篇博客总结了React Hooks在React-Router中进行页面路由传参的四种方法，包括类组件和Hooks的实现。通过对比不同方式的优缺点，帮助初学者选择合适的参数传递策略。

总结 React-Router 页面路由传参的四种方式，对比四种传参方式的优缺点，更好的去选择合适的方式去传参。
一、类组件

1.params
优点: 刷新地址栏，参数依然在。
缺点: 只能传字符串且传值太多的话，url 会又长又不美观。

// 定义路由匹配
<Route path='/path/:name' component={
   
   Path}/>

// Link组件实现跳转
<link to="/path/2">xxx</Link>

// history实现跳转
this.props.history.push({
   
   pathname:"/path/" + name});

读取参数用:this.props.match.params.name

params 传参方式可以传递一个或者多个值(值的类型都是字符串)，没法传递一个对象；如果需要传递一个对象的话，可以将 json 对象转换为字符串，传递获取后再将 json 字符串转换为对象将数据取出来。例：

// 定义路由匹配
<Route path="/user/:data" component={
   
   Component} />;
let data = {
   
   
  id: 3,
  name: "tom",
  age: 25,
};
let path = JSON.stringify(data);

// 传递路由参数
<Link to={
   
   path}>用户</Link>;
this.props.history.push(path);

// 使用路由参数
const nowData = JSON.parse(