Після встановлення необхідних залежностей можна інтегрувати бібліотеку у свій застосунок.

Щоб додати функціональність маршрутизації до застосунку, потрібно обгорнути кореневий компонент у BrowserRouter з бібліотеки react-router-dom. Цей крок є важливим, оскільки він ініціалізує систему маршрутизації та дозволяє керувати навігацією на основі URL.

Приклад

• Відкрийте файл index.js у вашому проєкті;
• Імпортуйте компонент BrowserRouter з бібліотеки react-router-dom:

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

• Обгорніть компонент App у компонент BrowserRouter, як показано нижче (рядки 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>
);

Обгортаючи компонент App у BrowserRouter, ми надаємо застосунку можливість використовувати маршрутизацію.