В React вложенные маршруты позволяют вам структурировать ваши маршруты иерархически, где один маршрут вложен в другой. Это полезно при создании сложных пользовательских интерфейсов, в которых определенные компоненты или страницы используются по разным маршрутам.

Для создания вложенных маршрутов вы можете использовать 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={}: основной маршрут с вложенными дочерними элементами.
• Вложенный маршрут: }> содержит дополнительные вложенные маршруты для «статистики» и «настроек».

Эта структура позволяет вам иметь общий макет (например, меню информационной панели) и динамически загружать определенные разделы, такие как статистика или настройки, на основе вложенных маршрутов.