0Pricing
React Academy · Aula

Rotas aninhadas e layouts com Outlet

Crie layouts de rotas em vários níveis usando aninhado e o componente .

Rotas aninhadas e layouts com Outlet é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O que são rotas aninhadas?

As rotas aninhadas no React Router v6 permitem compor layouts: uma rota pai renderiza uma estrutura base (navegação, barra lateral) e as rotas filhas preenchem a área de conteúdo por meio de <Outlet />.

Definindo rotas aninhadas

Coloque elementos <Route> filhos dentro de um elemento <Route> pai na configuração do roteador. O caminho pai é um prefixo para todos os filhos.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'settings', element: <Settings /> },
    ],
  },
]);

O componente Outlet

<Outlet /> é um espaço reservado no componente de layout pai. O React Router o substitui pelo elemento da rota filha correspondente.

function RootLayout() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/settings">Settings</Link>
      </nav>
      <main>
        <Outlet /> {/* child route renders here */}
      </main>
    </div>
  );
}

Rotas de índice

Uma rota index: true é renderizada quando a URL pai corresponde exatamente, funcionando como a filha padrão quando nenhum outro caminho filho corresponde.

{
  path: '/',
  element: <RootLayout />,
  children: [
    { index: true, element: <Home /> }, // renders at '/'
    { path: 'about', element: <About /> },
  ],
}

Aninhamento em vários níveis

As rotas podem ser aninhadas em vários níveis. Cada componente de layout da cadeia renderiza um <Outlet /> para seus próprios filhos.

const router = createBrowserRouter([
  {
    path: '/app',
    element: <AppShell />,
    children: [
      {
        path: 'users',
        element: <UsersLayout />,
        children: [
          { index: true, element: <UserList /> },
          { path: ':id', element: <UserDetail /> },
        ],
      },
    ],
  },
]);

Contexto do Outlet

Passe dados de um layout para as rotas filhas aninhadas por meio da propriedade context em <Outlet /> e leia-os com useOutletContext() nos filhos.

// Parent layout
function UsersLayout() {
  const [selected, setSelected] = useState(null);
  return <Outlet context={{ selected, setSelected }} />;
}

// Child route
function UserDetail() {
  const { selected } = useOutletContext();
  return <div>{selected}</div>;
}

Layouts nomeados com rotas sem caminho

Uma rota sem um path envolve os filhos apenas para fins de layout, sem adicionar um segmento à URL. É útil para agrupar rotas sob um layout compartilhado.

{
  element: <AuthenticatedLayout />, // no path
  children: [
    { path: '/profile', element: <Profile /> },
    { path: '/billing', element: <Billing /> },
  ],
}

Links relativos em rotas aninhadas

Dentro de uma rota aninhada, <Link to='sibling'> é resolvido em relação ao caminho da rota atual, assim como URLs relativas em HTML.

// Inside /app/users — link goes to /app/users/new
function UserList() {
  return <Link to="new">Add User</Link>;
}

useMatch em rotas aninhadas

useMatch(pattern) retorna dados de correspondência quando a URL atual corresponde ao padrão, sendo útil para estilizar links ativos em layouts aninhados.

function NavLink({ to, children }) {
  const match = useMatch(to);
  return (
    <Link to={to} className={match ? 'active' : ''}>
      {children}
    </Link>
  );
}

Limites de erro por segmento

Adicione um errorElement a qualquer rota aninhada para capturar erros apenas nesse segmento, sem derrubar toda a estrutura base do layout.

{
  path: 'users',
  element: <UsersLayout />,
  errorElement: <UsersError />,
  children: [
    { path: ':id', element: <UserDetail /> },
  ],
}

Padrão prático: layout de painel

Um painel típico usa uma rota de nível superior para a estrutura base do aplicativo (cabeçalho + barra lateral), com rotas aninhadas para cada seção. Assim, a estrutura permanece montada enquanto apenas a área de conteúdo muda.

function DashboardShell() {
  return (
    <div className="dashboard">
      <Sidebar />
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

Verificação rápida

Qual componente um layout pai deve renderizar para exibir sua rota filha correspondente?

Recapitulação

As rotas aninhadas permitem que as rotas pai renderizem layouts persistentes enquanto as rotas filhas preenchem o <Outlet />. Use rotas de índice para filhos padrão, rotas sem caminho para layouts compartilhados e useOutletContext para passar dados aos níveis inferiores.

Perguntas Frequentes

A aula “Rotas aninhadas e layouts com Outlet” é grátis?

Sim — o texto completo de “Rotas aninhadas e layouts com Outlet” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Rotas aninhadas e layouts com Outlet”?

Crie layouts de rotas em vários níveis usando aninhado e o componente . Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Rotas aninhadas e layouts com Outlet”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Rotas aninhadas e layouts com Outlet
  2. Carregadores e ações (API de roteador de dados)
  3. Rotas protegidas e guardas de autenticação
  4. Gerenciando estado nos parâmetros de busca da URL
← Voltar para React Academy