Vite + React ( Layout )

440 阅读1分钟

其实一开始 我也不太理解为什么要有 Layout 这种东西的存在, 一个页面就是一个页面, 但是后面开发多了, 就发现这东西真的好用,下面举一个🌰

现在要开发一个后台管理系统, 结构大概是这样的:

image.png

意味着 有一些路由变化时候, 你要保证 Header 、Footer、Sider中的内容不变化, 只有 Content 中间这个内容变化

routers/index.tsx 内容为:

image.png

其实项目里大体可以分为两种, 第一个就是 用Layout包裹的内容区, 以及其他单独出来的页面,例如Layout包裹的内容区。

所以你可以 运行项目, 地址栏输入 / 路径的时候展示是这样的

image.png

至于 BaseOut 代码已经上传到Gitee中了, 可以进行查看。

在代码中你可以看到 使用了 Outlet 他相当于 一个承接子类的容易, 就是说 你在配置路由的时候, 他 childrens: [] 里面的所有页面 都可以在这里进行展示

Gitee:gitee.com/yuyou930615…