Para que é que a biblioteca react-router-dom é usada no React?

react-router-dom é usado para construir aplicações de página única (SPA) em React, fornecendo roteamento do lado do cliente.

Para que serve?

• Navegação: Permite aos utilizadores navegar entre diferentes "páginas" (componentes) sem recarregar completamente a página.
• Gestão de URL: Sincroniza a URL atual na barra de endereços do navegador com o componente exibido.
• Roteamento dinâmico: Permite definir rotas com parâmetros (por exemplo, /users/:id) para carregar dados específicos.
• Navegação programática: Permite redirecionar o utilizador através de código (por exemplo, após guardar dados com sucesso).

Componentes principais:

• BrowserRouter: Envoltório para a aplicação que usa a API History para sincronizar a URL.
• Routes: Contêiner para definir as rotas.
• Route: Define a correspondência entre a URL e o componente.
• Link: Componente para criar links que evitam o recarregamento da página.
• useNavigate: Hook para navegação programática.
• useParams: Hook para extrair parâmetros da rota a partir da URL.

Exemplo de uso:

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Página inicial</Link> {' '}
        <Link to="/about">Sobre nós</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Exemplo de rota dinâmica */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;