React Router - Бібліотека маршрутизації для React

• reactrouter.com
• У React немає вбудованого модуля маршрутизації, тому використовується React Router - Бібліотека маршрутизації для React. Так само, як React надає нам набір примітивів для створення інтерфейсу користувача та роботи зі станом, React Router надає набір компонентів та хуків для створення маршрутизації, управління історією навігації користувача та відображення різних компонетів в залежності від поточного значення URL в адресному рядку браузера.

npm install react-router-dom

Все, що необхідно зробити, це обернути компонентом <BrowserRouter> всі програми.

index.js
import { BrowserRouter } from "react-router-dom";

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

Приклад:

// src/components/App.jsx

import { Routes, Route } from "react-router-dom";
import Home from "path/to/pages/Home";
import About from "path/to/pages/About";
import Products from "path/to/pages/Products";

export const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<Products />} />
      </Routes>
    </div>
  );
};

Конвенція структури файлів програми передбачає зберігання всіх компонентів у папці src/components. Компонент сторінки це звичайнісінький React-компонент, який містить у собі розмітку цілої сторінки вашої програми. Для зручності та структурованості такі компоненти зберігаються окремо від усіх, у папці src/pages.

Що буде, якщо користувач перейде за посиланням /non-existing-route або будь-якому іншому, якого немає в нашому додатку? Він побачить порожню вкладку браузера, без будь-якого контенту, оскільки жоден з описаних нами <Route> не підійде. Для цього до кінця списку маршрутів додамо ще один <Route>, який збігатиметься з будь-яким URL, але він буде обраний тільки в тому випадку, якщо жоден інший маршрут не підійде.

import { Routes, Route } from "react-router-dom";
import Home from "path/to/pages/Home";
import About from "path/to/pages/About";
import Products from "path/to/pages/Products";
import NotFound from "path/to/pages/NotFound";

const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<Products />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
};