React Router V6でOutletを利用したページコンテンツの遅延読み込み

1
const listPagePreloading = import("../pages/list");
2
const ListPage = React.lazy(() => listPagePreloading);
3

4
const itemPagePreloading = import("../pages/items");
5
const ItemPage = React.lazy(() => itemPagePreloading);
6

7
const editItemPagePreloading = import("../pages/items/edit");
8
const EditItemPage = React.lazy(() => editItemPagePreloading);
9

10
const protectedRoutes: RouteObject[] = [
11
  {
12
    path: "/",
13
    element: <RequireAuth><Outlet /></RequireAuth>,
14
    children: [
15
      {
16
        index: true,
17
        element: <Navigate to="/list" replace />
18
      },
19
      {
20
        path: "/list",
21
        element: <ListPageLayout />
22
        children: [
23
          {
24
            index: true,
25
            element: <ListPage />
26
          }
27
        ]
28
      },
29
      {
30
        path: "/items/:itemId",
31
        element: <ItemPageLayout />,
32
        children: [
33
          {
34
            index: true,
35
            element: <ItemPage />
36
          },
37
          {
38
            path: "/edit",
39
            element: <EditItemPage />
40
          }
41
        ]
42
      }
43
    ]
44
  }
45
]

1
- pages/
2
  - list/
3
    - layout.tsx
4
    - index.tsx
5
  - items/
6
    - index.tsx
7
    - layout.tsx
8
    - edit/
9
      - index.tsx
10
  ...

1
const RequireAuth = ({ children }: { children: JSX.Element }) => {
2
  const auth = useAuth();
3
  const location = useLocation();
4
  if (!auth.authenticated) {
5
    return <Navigate to="/login" state={{ from: location }} replace />;
6
  }
7
  return children;
8
};