1. 前言

1. 以前的文章路由都是5x路由配置
2. 接着6.x 嵌套路由-404配置-2

---

2. 效果演示

1. 效果图 演示.gif

2. 下述逻辑按这个来实现

---

3. 动态路由配置

1. 把之前的 我的/my界面里边 修改为二级路由,用来玩传参
2. 动态路由还是:绑定
3. 直接上相关代码,引入相关的代码就不贴了

 // 用来作为 404 页面的组件
const NotFound = () => {
  return <div>一朝一夕日复日，半醉半醒浮生梦</div>;
};
// 默认视图 演示
const DefaultView = () => {
 return (<div>
    <h3>请选择一个学生</h3>
    <NavLink to="/my/1">白金卡</NavLink> |
    <NavLink to="/my/2?name=zhangsan&cardNum=123456#bo">铂金卡|</NavLink>
    <NavLink to="/my/4" state={{ name: "李四", cardNum: 987654 }}>
      永久黑卡
    </NavLink>
  </div>)
};
export default function () {
  return (
    <Routes>
      {/* 其他代码和之前一样 */}
      <Route path="my" element={<MyPage />}>
 {/* index 默认显示*/}
        <Route index element={<DefaultView />}></Route>
 {/* 动态参数 :属性 */}
        <Route path=":id" element={<MyCard />}></Route>
      </Route>
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

4. 动态路由一般其实也都算是params传参,直接拼在路径后面的,所以套路都差不多
5. 子路由配置index,就是默认显示 效果和 path=""一样
6. DefaultView 是为了演示方便,没有单独写成一个页面组件

---

4. 路由出口

1. 子路由的出口在父路由,所以代码写到my里面
2. NavLink相当于vue的router-link
3. Outlet 是 子路由的出口组件哦

import { NavLink, Outlet } from "react-router-dom";

export default function index() {
  return (
     <div>
        <h1>我的</h1>
        <Outlet></Outlet>
     </div>
  );
}

---

5. 接收parmas动态参数的 问题

1. 这里的MyCard子路由接收参数的页面使用了函数式组件,先不要用类组件,后边说原因
2. 路由没有传值--证据 有图为证.png
3. 打印 props是空的,路由参数并没有自动注入到类组件中

---

6. 页面接收路由参数 的 配置

1. 没有自动注入那我们就手动注入,以前5x路由自动注入其实使用了高阶函数,高阶组件 withRouter方法
2. withRouter本质上就是一个组件，它的特点：它的参数是一个组件，它的返回值是一个新组件。
3. 我们称这样的组件是HOC(High Order Component高阶组件)，高阶组件本质上就是一个闭包的应用
4. 了解咋实现的 ,现在我们自己个就行

import {
  useParams,
  useLocation,
  useNavigate,
  useSearchParams,
} from "react-router-dom";

function withRouter(Component) {
  // 相当于给 MyCard组件添加各种props属性，还添加三个重要的属性params,location,navigate
  return (props) => (
    <Component
      {...props}
      searchParams={useSearchParams()}
      params={useParams()}
      location={useLocation()}
      navigate={useNavigate()}
    />
  );
}
// withRouter(MyCard)让当前组件MyCard可以访问路由信息。
// export default  MyCard
export default withRouter(MyCard);

5. {...props}原来的属性不变
6. useXXX开头的一般就是用到了hook,所以,这里我们只能用函数式组件来写页面
7. useParams()返回是动态参数对象
8. useLocation()返回本地url信息对象，pathname, hash, search(查询字符串), state携带的数据
9. useSearchParams()专门用来获取查询字符串参数。返回一个数组，第一个项用来获取值，第二个项是函数，用来修改值。
10. 把路由信息注入到当前组件

export default withRouter(MyCard);

---

7. 动态参数的获取

1. 来个图看打印参数的变化 参数.png
2. 回顾下跳转路由传参

<NavLink to="/my/1">白金卡</NavLink> |

3. params 传参接收

  let { id } = props.params;

4. 展示

 <h1>
        我的卡包---id: {id} <button onClick={goHome}>跳转到主页</button>
        <button onClick={goState}> state传参</button>
  </h1>

---

8. query传参

1. 就是拼接在url?的后面
2. 回顾下 传参

<NavLink to="/my/2?name=zhangsan&cardNum=123456#bo">铂金卡|</NavLink>

3. 接收 searchParams.get()

 // ? 后面
  let [searchParams] = props.searchParams;
  console.log("searchParams", searchParams);
  let queryName = searchParams.get("name");
  let queryCardNum = searchParams.get("cardNum");

4. 展示

  <h1>query? 传参</h1>
  <h3>姓名:{queryName} --卡号: {queryCardNum</h3>

5. searchParams打印 searchParams.png

---

9. state传参

9.1 传参方式

1. 链接跳转

<NavLink to="/my/4" state={{ name: "李四", cardNum: 987654 }}>
      永久黑卡
</NavLink>

2. 编程式导航

 const goState = () => {
    props.navigate("/my/3", { state: { name: "李四", cardNum: 1799798 } });
  };

3. 指定界面跳转 props.navigate("/my/4");
4. 主页跳转 props.navigate("/");

---

9.2 接收接收参数

 // state
  const stateParmas = useLocation();
  console.log("state:", stateParmas);
// 正常情况下直接这样写就行
 //let {cardNum,name} = stateParmas.state
// 我这里是因为三种传参都在一个界面,前2种没有传state, 这里会报错,所以做了错误处理
  let {cardNum,name} = stateParmas.state ? stateParmas.state  :  { name:'无名氏' , cardNum:  "没有传卡号"}

9.3 展示数据

  <h1>state 传参</h1>
  <h3>姓名:{ name} --卡号: { cardNum}</h3>
  <hr />

---

10. 后记

1. hook相关

---

参考资料

6.x 路由基础 -1
6.x 嵌套路由-404配置-2
高阶函数,高阶组件
高阶组件反向继承
react-router-dom 官网
5x路由配置

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉