Компоненти <Route> та <Routes>

За допомогою компоненти <Route> пов'язують певний URL з відповідним компонентом. Наприклад, щоб зверстати компонент <Reviews> коли користувач запитує шлях /reviews, треба описати такий маршрут.

<Route path="/reviews" element={<Reviews />} />

Тут передають два prop path - шлях, де / означає опис шляху починаючи від базового URL і element - у цей елемент передають будь-який валідний JSX, але найчастіше передають компоненти. Якщо path збігається зі значенням із адресного рядка браузера, то компонент рендериться, якщо не збігається - то не рендериться.

Маршрутів може бути описано скільки завгодно. Маршрути потрібно обовʼязково огорнути компонентом <Routes>, навіть якщо маршрут лише один.

Компонент <Routes> підбирає найбільш відповідний <Route> для поточного значення URL в адресному рядку браузера. Нижче наведено приклад простої маршрутизації застосунку веб-студії із головною сторінкою, контактами, відгуками та прикладами робіт:

App.jsx

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

export const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/reviews" element={<Reviews />} />
        <Route path="/works" element={<Works />} />
      </Routes>
    </div>
  );
};

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

Сторінка помилки навігації​

Якщо користувач спробує завантажити будь-яку сторінку, яка не описана в маршрутах, наприклад /just-page, то в браузері відобразиться порожня сторінка, оскільки жоден <Route> не збігся з умовою в адресному рядку.

Доречно прописати ще один <Route>, який буде завантажуватися, якщо жоден інший маршрут не підійде. Для цього в prop path вказують символ *. Він означає, що цей маршрут може збігатися з будь-яким значенням URL. Тому якщо жоден попередній <Route> не збігатиметься, то останній точно зарендерить користувачеві сторінку з повідомленням про те, що запитуваний маршрут не існує.

App.jsx

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

export const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/reviews" element={<Reviews />} />
        <Route path="/works" element={<Works />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
};