此贴仅提供思路参考，其中忽略掉了 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 路由加布局的写法优化

本文作者：自在废物

本文链接：https://rabithua.club/archives/790/

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。