LayoutRoute 레이아웃 적용

페이지 마다 레이아웃을 다르게 해야할 때, 레이아웃 컴포넌트를 따로 만들고, 라우팅 파일에서 path 설정 없이 layout 컴포넌트로 하위 컴포넌트 감싸주면 하위 컴포넌트들한테 모두 해당 layout이 적용됨

예시코드

①

<Route element={<AuthLayout />}>
	<Route
	path="login"
	element={<Login />}
	loader={redirectIfUser}
	/>
	<Route path="logout" />
</Route>

②

<Route element={<PageLayout />}>
    <Route path="/privacy" element={<Privacy />} />
</Route>

➔ And the resulting element tree rendered will be:

<PageLayout>
  <Privacy />
</PageLayout>

공식문서

📎 Nested Routes

React Router's nested routes were inspired by the routing system in Ember.js circa 2014. The Ember team realized that in nearly every case, segments of the URL determine:

• The layouts to render on the page
• The data dependencies of those layouts

React Router embraces this convention with APIs for creating nested layouts coupled to URL segments and data.

📎 Pathless Routes

They don't even have a path, how can they be a route? This is where the word "route" in React Router is used pretty loosely. and are index routes and is a layout route. We'll discuss how they work in the Rendering section. Neither really has much to do with matching.