React Router에서 중첩 경로 마스터하기: 동적 레이아웃 구축

React Router의 중첩 경로

React Router의

중첩 경로를 사용하면 다른 경로 내에 경로를 정의할 수 있어 복잡한 레이아웃이 가능하고 경로에 따라 다양한 구성 요소를 표시할 수 있습니다. 이 기능은 대시보드, 프로필 또는 관리 패널과 같은 자체 하위 경로가 있는 섹션이 있는 애플리케이션을 구축하는 데 특히 유용합니다.

중첩 경로는 계층적 URL을 생성하는 데 도움이 되며, 각 경로에는 상위 구성 요소 내의 특정 콘텐츠를 렌더링하는 하위 경로가 있을 수 있습니다.

---

중첩 경로를 만드는 방법

React Router에서 중첩 경로를 설정하려면 Routes 및 Route 구성 요소를 사용하여 상위 경로 내의 경로를 정의합니다.

중첩 경로 구현 단계

1. 상위 경로: 상위 구성 요소에 대한 경로를 정의합니다.
2. 하위 경로: 상위 구성 요소 내에서 하위 경로를 처리하기 위한 추가 Route 구성 요소가 포함된 Routes 구성 요소를 만듭니다.
3. Render Child Components: 상위 구성 요소에 하위 구성 요소를 렌더링하기 위한 자리 표시자 역할을 하는 구성 요소입니다.

---

중첩 경로의 기본 예

다음은 상위 경로와 중첩 경로를 정의하는 방법을 보여주는 기본 예입니다.

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

// Child Components
const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

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

export default App;

설명:

• 대시보드 구성요소는 탐색 링크와 요소. <아울렛 /> 하위 경로 구성 요소가 렌더링되는 자리 표시자 역할을 합니다. 프로필 및 설정 구성 요소는 대시보드 내부의
중첩 경로
• 입니다. 링크 구성 요소는 탐색에 사용되며, 클릭하면 URL이 업데이트되고 각 중첩 구성 요소(예: /dashboard/profile 또는 /dashboard/settings)가 렌더링됩니다.
• 대시보드 내부의 경로 및 경로 구성 요소는 중첩된 경로를 정의하여 URL이 /dashboard/profile 또는 /dashboard/settings와 일치할 때 적절한 구성 요소가 렌더링되도록 합니다.

---

경로 매개변수가 있는 중첩 경로

동적 매개변수를 사용하여 중첩 경로를 생성할 수도 있습니다.

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

// Child Components
const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

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

export default App;

설명:

• 프로필 구성요소는 URL(/dashboard/profile/:id)로부터 동적 매개변수를 받습니다.
• useParams() 후크는 동적 매개변수(이 경우 id)에 액세스하는 데 사용됩니다.
• 상위 경로 /dashboard에는 각 프로필에 대한 하위 경로가 있으며, URL이 변경되면(예: /dashboard/profile/1) 프로필 구성 요소에 사용자 ID가 표시됩니다.

---

기본 중첩 경로 처리

React Router는 기본 중첩 경로를 처리하는 방법을 제공합니다. 특정 하위 경로가 일치하지 않는 경우 기본 구성 요소를 표시할 수 있습니다.

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile/1">Profile 1</Link></li>
          <li><Link to="profile/2">Profile 2</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

const Profile = () => {
  const { id } = useParams();  // Retrieve the 'id' parameter from the URL
  return <h3>Profile Page for User: {id}</h3>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Route with Path Parameter */}
          <Route path="profile/:id" element={<Profile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

설명:

• 인덱스 경로는 상위 경로가 일치하지만 하위 경로가 제공되지 않는 경우 기본 구성 요소를 정의하는 데 사용되는 특수 경로입니다.
• 이 경우 /dashboard는 기본적으로 DashboardHome 구성 요소를 렌더링하지만 /dashboard/profile 또는 /dashboard/settings에 액세스하면 해당 구성 요소가 표시됩니다.

---

결론

React Router의 중첩 경로는 계층 구조로 복잡한 UI를 구축하는 데 필수적인 기능입니다. 이를 통해 탐색을 깔끔하고 동적으로 유지하면서 애플리케이션을 더 작고 관리 가능한 구성 요소로 나눌 수 있습니다. <아울렛 /> 구성 요소를 사용하면 상위 구성 요소 내부에 하위 경로를 렌더링할 수 있으며 동적 매개변수, 기본 경로 및 중첩된 URL 구조를 사용하여 라우팅을 추가로 사용자 정의할 수 있습니다.

---

위 내용은 React Router에서 중첩 경로 마스터하기: 동적 레이아웃 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!