No React, rotas aninhadas permitem que você estruture suas rotas hierarquicamente, onde uma rota é aninhada dentro de outra. Isso é útil ao construir UIs complexas onde determinados componentes ou páginas são compartilhados em diferentes rotas.

Para criar rotas aninhadas, você pode usar React Router, uma biblioteca popular para lidar com roteamento em aplicativos React.

Exemplo usando React Router (v6):

1. Instale o roteador React:

   npm install react-router-dom

1. Configurar rotas aninhadas:

   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;

Pontos-chave:

• Outlet: é aqui que os componentes da rota aninhados são renderizados.
• Route path="/" element={}: A rota principal com filhos aninhados.
• Rota aninhada: O }> contém outras rotas aninhadas para "estatísticas" e "configurações".

Essa estrutura permite que você tenha um layout comum (como um menu do painel) e carregue dinamicamente seções específicas, como estatísticas ou configurações com base nas rotas aninhadas.