Modificando trechos da página com o componente Outlet

Modificando trechos da página com o elemente Outlet §

---

O elemente Outlet do React Router DOM é utilizado para renderizar os elementes filhos de uma rota pai. Isso é útil para criar rotas aninhadas, onde determinadas rotas são filhas de outras.

import { BrowserRouter, Routes, Route, Outlet, useParams } from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sobre" element={<Sobre />} />
        <Route path="/contato" element={<Contato />} />
        <Route path="/produtos" element={<Produtos />}>
	      <Route path=":id" element={<DetalhesDoProduto />} />
	    </Route>
      </Routes>
    </BrowserRouter>
  );
}
 
function Produtos() {
  return (
    <h2>Produtos</h2>
    <Outlet />
  );
}
 
function DetalhesDoProduto() {
  const { id } = useParams();
  
  return (
    <h2>Produtos</h2>
    <p>Detalhes do produto {id}</p>
  );
}

Neste exemplo, o componente Outlet é permite que o conteúdo correspondente à rota atual seja renderizado no local onde o componente Outlet está definido.

Referências §

---

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