Agora que envolvemos nosso aplicativo com o BrowserRouter para habilitar o roteamento, o próximo passo é especificar as rotas (caminhos) que nosso aplicativo irá incluir. Essas rotas determinam a estrutura geral do aplicativo e controlam qual conteúdo é exibido com base na URL.

O React Router fornece dois componentes essenciais para definir rotas: Routes e Route. O componente Routes atua como um contêiner para todas as definições de rotas, enquanto o componente Route representa uma configuração de rota específica.

Veja a sintaxe para definir rotas:

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

Nesta estrutura:

• <path_value>: Especifica a configuração da URL para a rota;
• <component_to_render>: Determina o componente a ser renderizado quando um usuário acessa esse caminho específico.

Exemplo

Vamos aplicar este conceito ao nosso projeto. Abra o arquivo App.jsx e importe os componentes Routes e Route da biblioteca react-router-dom:

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

Dentro da declaração return do componente App, defina as rotas para o nosso aplicativo:

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Explicação do código:

• Linha 4, 8: <Routes>: Este componente serve como contêiner para definir as rotas na aplicação, atuando como componente pai para as definições de rotas individuais;
• Linha 5: <Route>: Representa uma definição de rota. Especifica que, quando o caminho da URL corresponder a /, o componente <HomePage /> deve ser renderizado;
• Linha 6: <Route>: Define outra rota. Quando o caminho da URL corresponder a /about, o componente <AboutPage /> será renderizado;
• Linha 7: <Route>: Define outra rota. Quando o caminho da URL corresponder a /contacts, o componente <ContactsPage /> será renderizado.