[React] 중첩라우팅, Outlet

📑 중첩라우팅(nested routes)

• 특정 경로에 대해 부모-자식 관계를 설정하여 하위 경로를 부모 경로 내부에 포함히킬 수 있게 해주는 기능
• 부모 컴포넌트가 기본 레이아웃을 렌더링하고, 자식 컴포넌트가 해당 레이아웃의 특정 위치에 표시되는 방식

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

- /dashboard 경로에 접근 시 Dashboard 컴포넌트를 렌더링
- Dashboard 컴포넌트가 렌더링 될때 /dashboard/profile, /dashboard/settings 경로를 추가로 설정하여 profile과 settings 컴포넌트를 각각 렌더링 한다. [중첩라우트(profile, settings)]

 

 

📑 Outlet

• 부모 라우터 컴포넌트 내에서 자식 라우트를 렌더링 할 위치를 지정하는 역할을 하는 컴포넌트
• Outlet 사용 시 부모 라우트가 렌더링될 때 해당 위치에 자식 라우트의 컴포넌트가 들어감

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>
      <Outlet /> {/* 하위 경로가 렌더링되는 위치 */}
    </div>
  );
}

export default Dashboard;

 

- Outlet이 있는 위치에 profile 또는 settings 컴포넌트가 렌더링 된다. 이 위치는 하위 경로에 따라 다르게 보여진다.
[
/dashboard/profile: Dashboard 컴포넌트가 렌더링되고, Outlet 자리에는 Profile 컴포넌트가 표시된다.
/dashboard/settings: Dashboard 컴포넌트가 렌더링되고, Outlet 자리에는 Settings 컴포넌트가 표시된다.
]