在 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 (
       

         

         {/* This is where nested routes will be rendered */}
         
       
     );
   }

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

   function About() {
     return 
About Page
;
   }

   function Dashboard() {
     return (
       

         
Dashboard
         

         {/* Nested routes inside Dashboard */}
         
       
     );
   }

   function Stats() {
     return 
Dashboard Stats
;
   }

   function Settings() {
     return 
Dashboard Settings
;
   }

   // App Component with Routes
   function App() {
     return (
       
         
           }>
             } />
             } />
             }>
               } />
               } />
             
           
         
       
     );
   }

   export default App;

要點：

• Outlet：這是渲染嵌套路由元件的位置。
• Route path="/" element={}：具有嵌套子級的主路由。
• 嵌套路由： }> 包含「stats」與「settings」的進一步嵌套路由。

此結構可讓您擁有通用佈局（如儀表板選單）並根據嵌套路由動態載入特定部分，如統計資料或設定。