React의 중첩 경로 이해: 종합 가이드

React에서 중첩 경로를 사용하면 한 경로가 다른 경로 안에 중첩되는 경로를 계층적으로 구조화할 수 있습니다. 이는 특정 구성 요소나 페이지가 여러 경로에서 공유되는 복잡한 UI를 구축할 때 유용합니다.

중첩 경로를 만들려면 React 애플리케이션에서 라우팅을 처리하는 데 널리 사용되는 라이브러리인 React Router를 사용할 수 있습니다.

React Router(v6)를 사용한 예:

1. React Router 설치:

   npm install react-router-dom

1. 중첩 경로 설정:

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

   // Layout Component with Nested Routes
   function Layout() {
     return (
       <div>
         <nav>
           <ul>
             <li>
               <Link to="/">Home</Link>
             </li>
             <li>
               <Link to="/about">About</Link>
             </li>
             <li>
               <Link to="/dashboard">Dashboard</Link>
             </li>
           </ul>
         </nav>

         {/* This is where nested routes will be rendered */}
         <Outlet />
       </div>
     );
   }

   // Components for each route
   function Home() {
     return <h2>Home Page</h2>;
   }

   function About() {
     return <h2>About Page</h2>;
   }

   function Dashboard() {
     return (
       <div>
         <h2>Dashboard</h2>
         <nav>
           <ul>
             <li>
               <Link to="stats">Stats</Link>
             </li>
             <li>
               <Link to="settings">Settings</Link>
             </li>
           </ul>
         </nav>

         {/* Nested routes inside Dashboard */}
         <Outlet />
       </div>
     );
   }

   function Stats() {
     return <h2>Dashboard Stats</h2>;
   }

   function Settings() {
     return <h2>Dashboard Settings</h2>;
   }

   // App Component with Routes
   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<Home />} />
             <Route path="about" element={<About />} />
             <Route path="dashboard" element={<Dashboard />}>
               <Route path="stats" element={<Stats />} />
               <Route path="settings" element={<Settings />} />
             </Route>
           </Route>
         </Routes>
       </Router>
     );
   }

   export default App;

핵심 포인트:

• 아웃렛: 중첩된 경로 구성요소가 렌더링되는 곳입니다.
• Route path="/" element={}: 중첩된 하위 항목이 있는 기본 경로
• 중첩 경로: }> "stats" 및 "settings"에 대한 추가 중첩 경로가 포함되어 있습니다.

이 구조를 사용하면 대시보드 메뉴와 같은 공통 레이아웃을 사용할 수 있으며 중첩된 경로를 기반으로 통계나 설정과 같은 특정 섹션을 동적으로 로드할 수 있습니다.

위 내용은 React의 중첩 경로 이해: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!