前言：
本文章将讲述两种不同的方式的传参方法：
方法一：
类似：/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查询参数对象即可，打印该对象，发现其内部还是存在很多方法的：
放心，上面的所有方法我都帮你们总结了
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
searchParams.values(); // 返回一个迭代器，装着该查询参数对象里面所有参数组的所有value
