Компонент <BrowserRouter>

Головний компонент управління маршрутизацією - <BrowserRouter>. Він містить всю логіку взаємодії з історією браузера, створює маршрутизатор і обʼєкт історії навігації.

Завдяки використанню контексту React, передається інформація про поточний стан історії навігації всім нащадкам.

Щоб підʼєднати маршрутизацію необхідно огорнути компонент застосунку в компонент <BrowserRouter>.

index.js

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

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

Для коректного деплою і роботи маршрутизації на GitHub необхідно додатково налаштувати компонент <BrowserRouter>. Треба в prop basename передати точну назву репозиторію на GitHub. Слеш на початку рядка - обов'язковий.

<BrowserRouter basename="/current_repo_name">
  <App />
</BrowserRouter>

Далі буде розглянуто, як формувати і обробляти маршрути.