Rotas aninhadas §

---

Rotas alinhadas no React Router DOM são rotas que são criadas dentro de outras rotas, permitindo a criação de uma hierarquia de rotas. Isso é útil para criar aplicações mais complexas com múltiplas páginas.

Por exemplo, imagine que você está criando uma aplicação de e-commerce. Você pode criar uma rota principal para a página inicial, e dentro dessa rota, criar rotas para as categorias de produtos, como “Eletrônicos”, “Roupas” e “Cozinha”. Dentro dessas rotas de categorias, você pode criar rotas para os produtos individuais, como “Smartphone X” ou “Camisa Azul”.

Aqui está um exemplo de como criar rotas alinhadas no React Router DOM:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/categorias" element={<Categorias />}>
          <Route path="eletronicos" element={<Eletronicos />} />
          <Route path="roupas" element={<Roupas />} />
          <Route path="cozinha" element={<Cozinha />} />
        </Route>
        <Route path="/produtos/:id" element={<Produto />} />
      </Routes>
    </BrowserRouter>
  );
}

Neste exemplo, a rota principal é a página inicial, representada pela rota /. A rota /categorias é uma rota alinhada que contém as categorias de produtos. Cada categoria é representada por uma rota filha, como /categorias/eletronicos. Dentro dessa rota de categoria, você pode criar rotas para os produtos individuais, como /categorias/eletronicos/smartphone-x.

A rota /produtos/:id é outra rota alinhada que contém os detalhes de um produto específico. Nesta rota, o parâmetro :id é usado para identificar o produto individualmente.

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado