Визначення Маршрутів для Навігації

Тепер, коли ми обгорнули наш застосунок у BrowserRouter для активації маршрутизації, наступним кроком є визначення маршрутів (шляхів), які міститиме наш застосунок. Ці маршрути визначають загальну структуру застосунку та контролюють, який контент відображається залежно від URL.

React Router надає два основні компоненти для визначення маршрутів: Routes та Route. Компонент Routes виступає контейнером для всіх визначень маршрутів, а компонент Route представляє конкретну конфігурацію маршруту.

Ось синтаксис для визначення маршрутів:

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

У цій структурі:

• <path_value>: Вказує конфігурацію URL для маршруту;
• <component_to_render>: Визначає компонент, який буде відображено при переході користувача за цим шляхом.

Приклад

Застосуємо цю концепцію у нашому проєкті. Відкрийте файл App.jsx та імпортуйте компоненти Routes і Route з бібліотеки react-router-dom:

import { Routes, Route } from "react-router-dom";

У межах оператора return компонента App визначте маршрути для нашого застосунку:

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Пояснення коду:

• Рядки 4, 8: <Routes>: Цей компонент слугує контейнером для визначення маршрутів у застосунку, виступаючи батьківським компонентом для окремих визначень маршрутів;
• Рядок 5: <Route>: Представляє визначення маршруту. Вказує, що коли шлях URL відповідає /, буде відображено компонент <HomePage />;
• Рядок 6: <Route>: Визначає ще один маршрут. Коли шлях URL відповідає /about, буде відображено компонент <AboutPage />;
• Рядок 7: <Route>: Визначає ще один маршрут. Коли шлях URL відповідає /contacts, буде відображено компонент <ContactsPage />.