24. 07. 24 TIL

중첩 라우팅과 outlet 컴포넌트

= 페이지 안에 또 다른 페이지를 넣을 수 있게 해주는 기술

 

1. 중첩 라우팅 개념

큰 페이지 안에 작은 페이지들을 정의하는 방법임

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import DashboardLayout from './DashboardLayout';
import Profile from './Profile';
import Settings from './Settings';
import Reports from './Reports';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 대시보드 경로 */}
        <Route path="/dashboard" element={<DashboardLayout />}>
        
          {/* /dashboard 경로에서 기본으로 보여줄 페이지 */}
          <Route index element={<Profile />} />
          
          {/* /dashboard/settings 경로 */}
          <Route path="settings" element={<Settings />} />
          
          {/* /dashboard/reports 경로 */}
          <Route path="reports" element={<Reports />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

 

2. outlet 컴포넌트

부모 컴포넌트 안에서 자식 컴포넌트가 어디에 보여질지 결정

쉽게 말해, outlet은 자식 컴포넌트를 위한 자리 표시자 역할을 함

import { Outlet } from 'react-router-dom';

function DashboardLayout() {
  return (
    <div>
      <header>Header Section</header>
      <main>
        <Outlet />  {/* 자식 컴포넌트가 여기에 렌더링됩니다. */}
      </main>
      <footer>Footer Section</footer>
    </div>
  );
}

 

* 정리

1. 자식 컴포넌트를 별도의 파일에 정의함 (ex. profile.js, setting.js, reports.js)

2. 부모 컴포넌트에서 outlet 사용해 위치 지정

3. 중첩 라우팅 지정

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import DashboardLayout from './DashboardLayout';
import Profile from './Profile';
import Settings from './Settings';
import Reports from './Reports';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 부모 경로 설정: /dashboard */}
        <Route path="/dashboard" element={<DashboardLayout />}>
          {/* 자식 경로 설정 */}
          <Route index element={<Profile />} />  {/* /dashboard 경로에서 기본으로 보여줄 페이지 */}
          <Route path="settings" element={<Settings />} />  {/* /dashboard/settings 경로 */}
          <Route path="reports" element={<Reports />} />  {/* /dashboard/reports 경로 */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

 

 

 

 

 

3. 중첩 라우팅 vs children을 사용한 공통 레이아웃

* 중첩 라우팅은 각 경로마다 다른 레이아웃을 사용할 수 있게 해줌

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
  </Route>
</Routes>

 

* children은 모든 경로에 동일한 레이아웃을 적용하고 싶을 때 사용

<Layout>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
  </Routes>
</Layout>