Nested Routes Rotas Aninhadas

Última atualização: 2026-11-03

Nested Routes Rotas Aninhadas

Rotas aninhadas expressam um layout mais suas páginas filhas como elementos Route pais e filhos: uma Route pai contém mais Routes, e o componente pai desenha um slot Outlet onde a página filha correspondente é renderizada. O layout clássico de administração — uma sidebar fixa com uma área de conteúdo que troca — é construído inteiramente a partir desse padrão. Cada nível mantém sua própria estrutura, então até uma hierarquia profunda de layouts continua fácil de entender.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

import { Routes, Route, Outlet } from 'react-router-dom'

function DashboardLayout() {
  return (
    <div>
      <aside>Sidebar (fixed by the parent)</aside>
      <main><Outlet /></main>   {/* the child route renders here */}
    </div>
  )
}

<Route path="dashboard" element={<DashboardLayout />}>
  <Route index element={<Overview />} />   {/* the default child page of /dashboard */}
  <Route path="team" element={<Team />} /> {/* /dashboard/team */}
</Route>

⚙️ Parâmetros

Retorna：Nada (é um componente declarativo). A rota pai renderiza seu próprio element, e a posição do Outlet dentro dela decide onde o conteúdo da rota filha aparece.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

O quadro externo e o título (o layout pai) nunca mudam, enquanto a caixa tracejada (a posição do Outlet) troca as páginas filhas conforme você clica — o resultado da renderização de Rotas pai/filha aninhadas mais Outlet (demonstração simulada).

💡 Pontos-chave

🏷️ Mais Roteamento e Estado

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós