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 (
       

         

         {/* 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;

重要なポイント:

• アウトレット: これは、ネストされたルート コンポーネントがレンダリングされる場所です。
• Route path="/" element={}: ネストされた子を持つメイン ルート。
• ネストされたルート: }> には、「統計」と「設定」のさらにネストされたルートが含まれます。

この構造により、共通のレイアウト (ダッシュボード メニューなど) を使用し、ネストされたルートに基づいて統計や設定などの特定のセクションを動的に読み込むことができます。