了解 React 中的嵌套路由：综合指南

在 React 中，嵌套路由允许您分层构建路由，其中​​一个路由嵌套在另一个路由中。当构建复杂的 UI（其中某些组件或页面在不同的路由之间共享）时，这非常有用。

要创建嵌套路由，您可以使用 React Router，这是一个用于在 React 应用程序中处理路由的流行库。

使用 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
             </li>
             <li>
               <link to="/about">About
             </li>
             <li>
               <link to="/dashboard">Dashboard
             </li>
           </ul>
         </nav>

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

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

   function About() {
     return <h2 id="About-Page">About Page</h2>;
   }

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

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

   function Stats() {
     return <h2 id="Dashboard-Stats">Dashboard Stats</h2>;
   }

   function Settings() {
     return <h2 id="Dashboard-Settings">Dashboard Settings</h2>;
   }

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

   export default App;

要点：

• Outlet：这是渲染嵌套路由组件的地方。
• Route path="/" element={}：具有嵌套子级的主路由。
• 嵌套路由：}>包含“统计”和“设置”的进一步嵌套路由。

此结构允许您拥有通用布局（如仪表板菜单）并根据嵌套路由动态加载特定部分，例如统计信息或设置。

以上是了解 React 中的嵌套路由：综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！