此贴仅提供思路参考,其中忽略掉了 import 部分的代码,react 小白读起来可能有些吃力
旧方案(使用 children )
我会单独创建一个 layout 目录,下面放我的layoutDashboard.tsx
文件,大致长这样
function LayoutDashboadrd({ children }: any) {
return <div>{children}</div>;
}
然后会在每个需要这个布局的页面代码中使用布局
function page() {
return (
<LayoutDashboard>
<div>page content</div>
</LayoutDashboard>
);
}
- 每个需要布局的页面都要单独引入布局
- 每个页面中的布局都是单独渲染的,页面跳转后布局都会重新渲染,导致布局状态重置
显然,这种方法是不合适的,有什么更好的办法吗?
有的,那就是在路由中使用layout,这样一个路径下的子路由都可以使用一个布局,并且布局中的状态是不会因为子路由跳转而重置的。
新方案(使用 Outlet )
同样,我会单独创建一个 layout 目录,下面放我的layoutDashboard.tsx
文件,大致长这样
function LayoutDashboadrd() {
return (
<div>
<Outlet />
</div>
);
}
在这里,你会发现 children 没有了,而是在原本 children 的位置多了一个 <Outlet />
。
然后在原本的路由定义中
export default function GlobalRouterProvider() {
const router = createBrowserRouter([
{
path: "/mine",
element: <LayoutDashboadrd />,
children: [
{
index: true,
element: <Mine />,
},
{
path: "filter",
element: <MineFilter />,
},
],
},
{
path: "*",
element: <ErrorPage />,
},
]);
return <RouterProvider router={router} />;
}
我习惯用这种路由写法,如果你使用的是其他写法,可以让 ChatGPT
之类的ai帮你转换类型
然后,<Mine />
页面中并不需要其他特殊的代码,如果你是从旧写法中改动过来的,记得删除页面中引用的 layout
至此,你的 React 项目代码又优雅了一点~