1. 前言
- 以前的文章路由都是
5x路由配置,最近写个6x的,写完准备玩玩C,到时候在交流- 因为现在脚手架默认安装的
react也是18.x了 所以也注意哦- 路由hook用法单独在写文章
- react-router-dom 官网 英文的 有兴趣的可以自己看着学
- 接着 react-6路由-1-基础
2. 效果演示
- 效果图
演示.gif- 下述逻辑按这个来实现
3. 二级路由配置
- 把上节课的朋友里边 修改为二级路由
- 先上代码在分析
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> ); }
- 嵌套路由的大体逻辑就是
Route嵌套Route,vue-router也差不多,子路由配置都一样- 子路由 path为空 就会默认显示这个子路由,和编写的顺序没有关系,放在最后一个也是默认显示
4. 跳转路由
- 子路由的出口在父路由,所以代码写到
friendList里面NavLink相当于vue的router-link- 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> ); }
- 简单效果图
1.png- 单独把这个 高中作为组件来实现了
export default function () { return ( <div> <h1>假装这里是高中同学列表</h1> </div> ) }
5. 三级路由
- 以朋友列表高中同学为例,写3级路由
- 路由配置
<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. 页面使用配置
- 注意出口
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> ) }
- 效果图
三级路由.png
7. 404 配置
- so easy
// 用来作为 404 页面的组件 const NotFound = () => { return <div>一朝一夕日复日，半醉半醒浮生梦</div> } export default function () { return ( <Routes> // 放到末尾就行 <Route path="*" element={<NotFound />} /> </Routes> ); }
- 简单演示
演示404.png
8. 后记
- 就到这,是个基础配置,也有界面效果
- hook
