此贴仅提供思路参考,其中忽略掉了 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 项目代码又优雅了一点~

写在最后

好久没写博客了,其实也没有说是没做输出,只是都写到自己搭建的社区了,更新还是挺频繁的,感觉社区是一个更好的载体,博客写起来压力也比较大,不想太水。
喜欢博客的可以去 社区 吹吹水~

原文:仰止-React 路由加布局的写法优化