Nas lições anteriores, você aprendeu que React é uma aplicação de página única. Aplicações de página única são aplicações que contêm um arquivo HTML e usam JavaScript para atualizar dinamicamente qualquer conteúdo na página. O que acontece quando você precisa adicionar várias "páginas" à sua aplicação React? Como você navegaria para essas diferentes views? Bem, é aí que o React Router entra em cena. React Router é uma biblioteca de terceiros que permite adicionar roteamento às suas aplicações React. Para começar, você precisará instalar o React Router em um projeto React existente assim:

npm i react-router

Se você verificar o arquivo package.json, verá que o react-router foi adicionado à lista de dependências:

"dependencies": {
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-router": "^7.2.0"
}

Então dentro do seu arquivo main.jsx ou index.jsx, você precisará importar BrowserRouter e renderizar BrowserRouter ao redor do seu componente App:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./App.jsx";

import "./index.css";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

Para habilitar rotas na sua aplicação, você precisará atualizar sua declaração de import para incluir os componentes Routes e Route assim:

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

Então, dentro do BrowserRouter, adicione os componentes Routes e Route:

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>
);

O path e o element são usados para acoplar a URL e os componentes da interface do usuário juntos. Neste caso, estamos configurando uma rota para a página inicial que aponta para o componente App. É comum em aplicações maiores ter múltiplas views e rotas configuradas assim:

<Routes>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />

  <Route path="products">
    <Route index element={<ProductsHome />} />
    <Route path=":category" element={<Category />} />
    <Route path=":category/:productId" element={<ProductDetail />} />
    <Route path="trending" element={<Trending />} />
  </Route>
</Routes>

A prop index nestes exemplos tem o propósito de representar a rota padrão para um determinado segmento de caminho. Então o componente Home será exibido no caminho raiz (/) enquanto o componente ProductsHome será exibido no caminho products. Você também pode ter notado que estamos aninhando algumas rotas dentro de outra rota assim:

<Route path="products">
  <Route path="trending" element={<Trending />} />
</Route>

Isso significa que o caminho da rota filha será anexado ao caminho da rota pai. Então, neste exemplo, o path para os produtos em alta será products/trending. Se o path começar com dois pontos (:) isso representa um segmento dinâmico na rota:

<Route path=":category" element={<Category />} />

Neste exemplo temos um segmento dinâmico chamado category. Quando um usuário navega para uma URL como products/brass-instruments, a visualização mudará para o componente Category e você pode buscar dinamicamente os dados apropriados com base no segmento. Você pode acessar o valor do segmento dinâmico usando o hook useParams dentro do componente filho assim:

import { useParams } from "react-router";

export default function Category() {
  let params = useParams();
   {/* Accessing the category param: params.category */}
   {/* rest of code goes here */}
}

Rotas dinâmicas são úteis porque permitem criar componentes flexíveis e reutilizáveis que podem renderizar conteúdos diferentes com base nos parâmetros na URL. Em vez de definir uma lista fixa de caminhos para cada rota possível, você pode usar segmentos dinâmicos para renderizar vários conteúdos com base no que o usuário solicitou.