1. 前言

1. 以前的文章路由都是5x路由配置,最近写个6x的,写完准备玩玩C,到时候在交流
2. 因为现在脚手架默认安装的react也是18.x了 所以也注意哦
3. 路由hook用法单独在写文章
4. react-router-dom 官网 英文的 有兴趣的可以自己看着学
5. 接着 react-6路由-1-基础

2. 效果演示

1. 效果图
   

   演示.gif

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

3. 二级路由配置

1. 把上节课的朋友里边 修改为二级路由
2. 先上代码在分析

 const  HightSchool = loadable(()=>import("../pages/hightSchool"),{ fallback: <Loading /> }) ;

export default function () {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      
      <Route path="/fl" element={<FriendList />} >
        <Route path="" element={ <h3>假装这里是初中同学 列表</h3>}/>
        <Route path="high" element={<HightSchool />}/>
        <Route path="university" element={ <div>假装这里是大学同学 列表</div>}/>
      </Route>

      <Route path="/fc" element={<FriendCircle />} />
      <Route path="/my" element={<MyPage />} />
    </Routes>
  );
}

3. 嵌套路由的大体逻辑就是 Route嵌套Route,vue-router也差不多,子路由配置都一样
4. 子路由 path为空 就会默认显示这个子路由,和编写的顺序没有关系,放在最后一个也是默认显示

4. 跳转路由

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

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

export default function index() {
  return (
    <div>
      <h1>联系人</h1>
      {/* 第一个/不能省不然会默认 拼接  */}
      <NavLink to="/fl/"> 初中同学</NavLink>
      <NavLink to="/fl/high"> 高中学同学</NavLink>
      <NavLink to="/fl/university"> 大学同学</NavLink>
      {/*  二级路由显示的容器，Outlet出口 */}
      <Outlet />
    </div>
  );
}

4. 简单效果图
   

   1.png

5. 单独把这个 高中作为组件来实现了

export default function () {
  return (
    <div>
        <h1>假装这里是高中同学列表</h1>
    </div>
  )
}

5. 三级路由

1. 以朋友列表高中同学为例,写3级路由
2. 路由配置

      <Route path="/fl" element={<FriendList />} >
        <Route path="" element={ <h3>假装这里是初中同学 列表</h3>}/>
        <Route path="university" element={ <div>假装这里是大学同学 列表</div>}/>

        <Route path="high" element={<HightSchool />}>
            <Route path="two" element={<h3> 假装这里是 高二同学 界面</h3>}/>
            <Route path="" element={<div> 假装这里是 高一同学 界面</div>}/>
        </Route>
      </Route>

6. 页面使用配置

1. 注意出口

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

export default function () {
  return (
    <div>
        <h1>假装这里是高中同学列表</h1>
        <NavLink to="/fl/high/"> 高1同学</NavLink>
        <NavLink to="/fl/high/two"> 高2学同学</NavLink>
        <Outlet/>
    </div>
  )
}

2. 效果图
   

   三级路由.png

7. 404 配置

1. so easy

// 用来作为 404 页面的组件
const NotFound = () => {
  return <div>一朝一夕日复日，半醉半醒浮生梦</div>
}
export default function () {
  return (
    <Routes>
       // 放到末尾就行
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

2. 简单演示
   

   演示404.png

8. 后记

1. 就到这,是个基础配置,也有界面效果
2. hook

参考资料

6.x 路由基础 -1
6.x 路由传值
react-router-dom 官网

初心

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

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

共勉