Nested Routes

The concept of nested routes

Nested Routing은 URL의 세그먼트들을 컴포넌트의 계층과 데이터에 연결해주는 보편적인 방식이다.
React router nested routes 방식은 Ember라는 팀의 라우팅 방식에서 영감을 받아 개발되었는데, 아이디어는 바로 URL 세그먼트들은 거의 모든 경우데 대해 다음을 결정할 수 있는 것이었다.

1. 그 페이지에서 렌더링 할 레이아웃
2. 해당 레이아웃들의 데이터 종속성

위의 서술을 내가 이해하는 바로는 다수의 Route components는 각각 URL segment(=path)로 구분될 수 있고, 또한 각각의 element, loader의 API action을 지정해줄 수 있다.
즉, URL segment을 구분자로 사용하여 어떤 레이아웃을 렌더링 해야 하는 지(=element, import), 어떤 데이터를 사용해야 하는 지(=loader, fetch)를 정의해줄 수 있다는 것이다.

Convention

nested routes 는 다음과 같은 두 가지 방법으로 사용할 수 있다.

// Configure nested routes with JSX
createBrowserRoute(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="contact" element={<Contact />} />
      <Route
        path="dashboard"
        element={<Dashboard />}
        loader={({ request }) =>
                 fetch("/api/dashboard.json", {
      				signal: request.signal,
    			 })
               }
        />
      <Route element={<AuthLayout />}>
        <Route
          path="login"
          element={<login />}
          loader={redirectIfUser}
        />
        <Route path="logout" />
      </Route>
    </Route>
  )
);

// Or use plain objects
createBrowserRouter([
  {
  	path: "/",
    element: <Root />,
    children: [
      {
      	path: "contact",
        element: <Contact />,
      },
      {
      	path: "dashboard",
        element: <Dashboard />,
        loader: ({ request }) => 
                	fetch("/api/dashboard.json", {
        				signal: request.signal,
        			}),
      },
      {
      	element: <AuthLayout />,
        children: [
          {
          	path: "login",
            element: <Login />,
            loader: redirectIfUser,
          },
          {
          	path: "logout",
            action: logoutUser,
          },
        ],
      },
    ],
  },
]);

Reference

React Router - Nested Routes
참고 이미지