react|react简单入门-react-router6.0及以上路由传参，以及接受参数前端|javascript|react.js

前言：
本文章将讲述两种不同的方式的传参方法：
方法一：类似：/home/123、/home/123/zhangsan
先看demo：
根组件：
只关心我框出来的内容即可

文章图片

Home组件：

文章图片

HomeItem组件：

文章图片

Invoice组件：

文章图片

导入的依赖：

文章图片

场景：
比如说，我想访问主页，但是每个人的主页信息是不同的，直接访问/home肯定是确定不了的，需要携带一些参数，比如id和name之类的，这样你才能确定你访问是谁的主页，那路径就有可能是类似这样的/home/zhangsan，又或者说有可能会有同名的人，那我有可能会进行分组，想找具体组的具体的“zhangsan”，那就有可能访问的是/home/123/zhangsan
传参：其实上诉场景中就已经是传参了，比如访问/home/zhangsan或/home/123/zhangsan，但实际情况中，往往不可能让用户直接在浏览器地址栏直接访问这两个路径，开发者也不会直接写死张三的主页，让用户去点，也许你可以尝试这样编程式导航，就类似Invoice组件中navigate("/home/123");一样效果如下：

接收参数：
其实在我的HomeItem组件中就已经体现到了，就是使用useParams()：

文章图片

方法二：类似：/home?id=123&name=zhangsan&age=18
传参：
看dome：
只需要关注我框起来的地方即可：

文章图片

所需要导入的依赖包：

import { useSearchParams } from "react-router-dom";

效果：
当我点击按钮的时候，浏览器的地址栏就会发生变化

react|react简单入门-react-router6.0及以上路由传参，以及接受参数

文章图片

接收参数：
使用searchParams查询参数对象即可，打印该对象，发现其内部还是存在很多方法的：

文章图片

放心，上面的所有方法我都帮你们总结了

searchParams.forEach(); // 遍历该查询参数对象所有的参数组
文章图片

文章图片
searchParams.append(“age”, 18); // 向查询参数对象后增加一组参数，该函数的两个参数分别为：（新增的字段，新增的字段的值）,可重复追加
文章图片

文章图片
searchParams.delete(“age”); // 删除查询参数对象的一组参数，如果age有多组，也是全都删除，但并不会删除地址栏
文章图片

文章图片
searchParams.entries(); // 返回一个该查询参数对象所有的参数组的迭代器，每个参数组为一个数组,如：[“id”,“123”]
文章图片

文章图片

searchParams.get(“id”); // 获取该查询参数对象的首个为”id“的值
文章图片

文章图片
searchParams.getAll(“id”); // 获取该查询参数对象的所有的“id”的值，返回一个数组，如：[“123”,“456”]
文章图片

文章图片
searchParams.has(“id”); // 判断该查询参数对象是否存在“id”，存在则true，反之false
文章图片

文章图片
searchParams.keys(); // 返回一个迭代器，装着该查询参数对象里面所有参数组的所有key
文章图片

文章图片
searchParams.set(“id”, 789); // 设置该查询参数对象的具体字段的值，该函数两个参数分别为：（要修改的字段，要修改的字段期望的值），如果有重复的，将都会删除，合成一个
文章图片

文章图片
searchParams.sort(); // 将该查询参数对象的key按ASCll码排序
文章图片

文章图片
searchParams.toString(); // 直接把查询参数对象转为查询字符串，如：id=123&name=zhangsan&id=456
文章图片

文章图片
【react|react简单入门-react-router6.0及以上路由传参，以及接受参数】searchParams.values(); // 返回一个迭代器，装着该查询参数对象里面所有参数组的所有value
文章图片

文章图片