Programação B

Navegação entre Páginas

A lista de eventos mostra o título, a data e a descrição. Mas o TamoJunto precisa de uma tela de detalhe onde o usuário veja todas as informações do evento. Na web, cada tela tem sua própria URL: /events para a lista, /events/3 para o detalhe do evento com id = 3.

Em aplicações tradicionais (como o próprio backend com Express), cada URL dispara uma requisição HTTP ao servidor, que retorna uma página HTML nova. Com componentes, podemos fazer diferente: client-side routing. O JavaScript intercepta cliques em links, atualiza a URL no navegador, e renderiza o componente correspondente — sem sair da página.

Instalando o React Router

$ npm install react-router-dom

O React Router é a biblioteca de roteamento mais usada com React. Ela oferece componentes que mapeiam URLs a componentes da aplicação.

Configurando as rotas

Atualize App.tsx:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import EventList from "./EventList";
import EventDetail from "./EventDetail";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<EventList />} />
        <Route path="/events/:id" element={<EventDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Duas rotas. O / renderiza a lista de eventos. O /events/:id renderiza o detalhe — o :id é um parâmetro de rota, uma parte dinâmica da URL que o componente pode ler. Acessar /events/3 renderiza o EventDetail com id = "3".

Linkando da lista para o detalhe

No EventCard, transforme o título num link:

import { Link } from "react-router-dom";
import { Event } from "./types";

function EventCard({ event }: { event: Event }) {
  return (
    <article className="event-card">
      <h2>
        <Link to={`/events/${event.id}`}>{event.title}</Link>
      </h2>
      <time dateTime={event.date}>
        {new Date(event.date).toLocaleString("pt-BR", {
          dateStyle: "short",
          timeStyle: "short",
        })}
      </time>
      <p>{event.description}</p>
      <p>📍 {event.location}</p>
      <p>
        Vagas: {event.capacity} · Organizado por {event.organizer_name}
      </p>
    </article>
  );
}

export default EventCard;

O <Link> do React Router renderiza um <a> no HTML, mas intercepta o clique: ao invés de navegar para o servidor, ele atualiza a URL no navegador e renderiza o componente da rota correspondente. O botão “voltar” do navegador funciona normalmente — o React Router gerencia o histórico.