React 路由加布局的寫法優化

此貼僅提供思路參考，其中忽略掉了 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 專案程式碼又優雅了一點～

寫在最後#

好久沒寫部落格了，其實也沒有說是沒做輸出，只是都寫到自己搭建的社群了，更新還是挺頻繁的，感覺社群是一個更好的載體，部落格寫起來壓力也比較大，不想太水。
喜歡部落格的可以去 [社群][1] 吹吹水～

原文：[仰止 - React 路由加佈局的寫法優化][2]