Routing com React Router (conceitual)

Por que um router?

Uma aplicação React é, por padrão, uma SPA (single-page application): uma única página HTML cujo conteúdo muda com JavaScript. Para que URLs diferentes (/, /produtos, /produtos/42) mostrem views distintas sem recarregar a página, usa-se uma biblioteca de routing. A mais difundida é o React Router.

Nestes exercícios o router não está disponível no runtime: esta lição é conceitual. Você aprenderá a ler e raciocinar sobre o código; as verificações de routing são feitas com quizzes.

Definir as rotas: <BrowserRouter>, <Routes> e <Route>

Envolve-se a aplicação em um <BrowserRouter> e declaram-se as rotas com <Routes> e <Route>. Cada <Route> associa um path a um componente através da prop element:

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/produtos" element={<Produtos />} />
        <Route path="/produtos/:id" element={<Produto />} />
      </Routes>
    </BrowserRouter>
  );
}

O router observa a URL do navegador e renderiza o element da primeira rota que coincide. Trocar de view não recarrega a página: apenas a subárvore React é trocada, preservando o estado do restante da SPA.

Navegar sem recarregar: <Link>

Para navegar entre rotas usamos <Link> em vez de um <a> normal. Um <a href> provocaria um recarregamento completo da página; <Link> muda a URL e deixa o router trocar a view:

import { Link } from "react-router-dom";

function Menu() {
  return (
    <nav>
      <Link to="/">Início</Link>
      <Link to="/produtos">Produtos</Link>
    </nav>
  );
}

Parâmetros de rota: useParams

Repare em path="/produtos/:id": os segmentos dinâmicos começam com :. Dentro do componente dessa rota, o hook useParams retorna um objeto com esses parâmetros obtidos da URL:

import { useParams } from "react-router-dom";

function Produto() {
  const { id } = useParams(); // em /produtos/42 → id === "42"
  return <h1>Produto número {id}</h1>;
}

Assim, uma única rota e um único componente servem para infinitas páginas de produto.

Navegar por código: useNavigate

Às vezes você não quer um link, mas navegar como consequência de uma ação (após enviar um formulário, ao fazer login...). Para isso existe o hook useNavigate, que retorna uma função:

import { useNavigate } from "react-router-dom";

function FormularioLogin() {
  const navigate = useNavigate();

  function aoEnviar() {
    // ...lógica de login...
    navigate("/painel"); // redireciona para /painel
  }

  return <button onClick={aoEnviar}>Entrar</button>;
}

Resumo mental: <Route> declara o que se vê em cada URL, <Link> e useNavigate mudam de URL, e useParams lê os trechos dinâmicos.