Após instalar as dependências necessárias, podemos prosseguir para integrar a biblioteca em nossa aplicação.

Para incorporar a funcionalidade de roteamento em nossa aplicação, é necessário envolver o componente raiz com o BrowserRouter da biblioteca react-router-dom. Esta etapa é fundamental, pois inicializa o sistema de roteamento e permite gerenciar a navegação com base na URL.

Exemplo

• Abra o arquivo index.js em seu projeto;
• Importe o componente BrowserRouter da biblioteca react-router-dom:

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

• Envolva o componente App com o componente BrowserRouter, conforme mostrado abaixo (linhas 9-11):

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App/App";
import { BrowserRouter } from "react-router-dom";

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

Ao envolver o componente App com o BrowserRouter, disponibilizamos a funcionalidade de roteamento em nossa aplicação.