중첩 경로를 사용하면 다른 경로 내에 경로를 정의할 수 있어 복잡한 레이아웃이 가능하고 경로에 따라 다양한 구성 요소를 표시할 수 있습니다. 이 기능은 대시보드, 프로필 또는 관리 패널과 같은 자체 하위 경로가 있는 섹션이 있는 애플리케이션을 구축하는 데 특히 유용합니다.
중첩 경로는 계층적 URL을 생성하는 데 도움이 되며, 각 경로에는 상위 구성 요소 내의 특정 콘텐츠를 렌더링하는 하위 경로가 있을 수 있습니다.
React Router에서 중첩 경로를 설정하려면 Routes 및 Route 구성 요소를 사용하여 상위 경로 내의 경로를 정의합니다.
다음은 상위 경로와 중첩 경로를 정의하는 방법을 보여주는 기본 예입니다.
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;
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;
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;
React Router의 중첩 경로는 계층 구조로 복잡한 UI를 구축하는 데 필수적인 기능입니다. 이를 통해 탐색을 깔끔하고 동적으로 유지하면서 애플리케이션을 더 작고 관리 가능한 구성 요소로 나눌 수 있습니다. <아울렛 /> 구성 요소를 사용하면 상위 구성 요소 내부에 하위 경로를 렌더링할 수 있으며 동적 매개변수, 기본 경로 및 중첩된 URL 구조를 사용하여 라우팅을 추가로 사용자 정의할 수 있습니다.
위 내용은 React Router에서 중첩 경로 마스터하기: 동적 레이아웃 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!