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

前言：
本文章将讲述两种不同的方式的传参方法：

方法一：

类似：/home/123、/home/123/zhangsan
先看demo：
根组件：
只关心我框出来的内容即可

Home组件：

HomeItem组件：

Invoice组件：

导入的依赖：

场景：
比如说，我想访问主页，但是每个人的主页信息是不同的，直接访问/home肯定是确定不了的，需要携带一些参数，比如id和name之类的，这样你才能确定你访问是谁的主页，那路径就有可能是类似这样的/home/zhangsan，又或者说有可能会有同名的人，那我有可能会进行分组，想找具体组的具体的“zhangsan”，那就有可能访问的是/home/123/zhangsan

传参：其实上诉场景中就已经是传参了，比如访问/home/zhangsan或/home/123/zhangsan，但实际情况中，往往不可能让用户直接在浏览器地址栏直接访问这两个路径，开发者也不会直接写死<Link to="/home/zhangsan">张三的主页</Link>，让用户去点，也许你可以尝试这样编程式导航，就类似Invoice组件中navigate("/home/123");一样效果如下：

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

方法二：

类似：/home?id=123&name=zhangsan&age=18

传参：
看dome：
只需要关注我框起来的地方即可：

所需要导入的依赖包：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12. searchParams.values(); // 返回一个迭代器，装着该查询参数对象里面所有参数组的所有value