En React, las rutas anidadas te permiten estructurar tus rutas jerárquicamente, donde una ruta está anidada dentro de otra. Esto es útil al crear interfaces de usuario complejas donde ciertos componentes o páginas se comparten a través de diferentes rutas.

Para crear rutas anidadas, puedes usar React Router, una biblioteca popular para manejar el enrutamiento en aplicaciones React.

Ejemplo usando React Router (v6):

1. Instalar el enrutador React:

   npm install react-router-dom

1. Configurar rutas anidadas:

   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;

Puntos clave:

• Outlet: aquí es donde se representan los componentes de la ruta anidada.
• Ruta ruta="/" elemento={}: La ruta principal con hijos anidados.
• Ruta anidada: }> contiene más rutas anidadas para "estadísticas" y "configuraciones".

Esta estructura le permite tener un diseño común (como un menú de panel) y cargar dinámicamente secciones específicas como estadísticas o configuraciones basadas en las rutas anidadas.