Володимир Шайтан Senior Full Stack Developer у UKEESS Software House, Викладач Комп'ютерної школи Hillel.

Інна Овчаренко Junior Frontend Developer | React

Світ без маршрутизації. Уявіть, що кожного разу, коли ви натискаєте на посилання у вебдодатку, сторінка повністю перезавантажується. Незручно, правда?

Це було типовим підходом у вебдодатках, які розроблялися раніше. І це займало більше часу, оскільки кожен запит вимагав перезавантаження всієї сторінки з сервера. Навіть найменша зміна на сайті вимагала оновлення всієї сторінки, що значно погіршувало досвід користувача. Виходило насправді не дуже user-friendly.

ЩО ТАКЕ МАРШРУТИЗАЦІЯ?

Маршрутизація (роутинг) — це процес, за допомогою якого вебдодаток визначає, який компонент або сторінку показати користувачу залежно від URL-адреси.

Маршрутизація дозволяє додатку підвантажувати лише потрібний контент, не перезавантажуючи всю сторінку. Наприклад, при переході з головної сторінки на сторінку «About», ми змінюємо тільки частину інтерфейсу, що відповідає за контент, тоді як загальна структура залишається незмінною. У цьому й суть.

До діла.

Роутинг відіграє важливу роль у вебдодатках, оскільки відповідає за навігацію між різними сторінками й компонентами. Сьогодні ми будемо говорити про маршрутизацію в React.

React Router — це бібліотека для маршрутизації у React, яка дозволяє легко керувати переходами між сторінками, додавати динамічні та вкладені маршрути, а також реалізовувати захищені маршрути.

У цій статті ми розглянемо, як налаштувати та використовувати динамічний роутинг і вкладені маршрути для створення гнучкої та масштабованої структури програми. Розглянемо основні концепції з прикладів.

ОСНОВИ МАРШРУТИЗАЦІЇ В REACT ROUTER

Для початку роботи з React Router необхідно встановити саму бібліотеку React Router.Зробити це можна за допомогою npm або yarn:

npm install react-router-dom
yarn add react-router-dom

Після встановлення потрібно обернути всю програму в компонент BrowserRouter, щоб маршрутизація могла функціонувати. Зазвичай це робиться в кореневому компоненті програми, наприклад, index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    document.getElementById('root')
);

Тепер, коли React Router підключено, можна починати створювати маршрути.

ПРОСТІ МАРШРУТИ: ЯК СТВОРИТИ БАЗОВІ ШЛЯХИ ДЛЯ КОМПОНЕНТІВ

Для створення маршрутів використовується компонент Routes, у якому визначаються окремі маршрути за допомогою компонента Route.

Кожен маршрут асоціюється з конкретним шляхом (path) і компонентом, який має бути рендерним при відвідуванні цього шляху. Приклад простої конфігурації маршрутів:

import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
  );
}

export default App;

У цьому прикладі:

• маршрут зі шляхом / відображатиме компонент Home;
• маршрут зі шляхом /about відображатиме компонент About;
• маршрут зі шляхом /contact відображатиме компонент Contact.

При зміні URL-адреси у браузері (наприклад, при переході на /about), React Router відобразить відповідний компонент без перезавантаження сторінки.

ЩО ТАКЕ ДИНАМІЧНІ МАРШРУТИ?

Динамічні маршрути дозволяють створювати URL-адреси з параметрами, які змінюються залежно від запиту. Це особливо корисно для відображення сторінок, що містять інформацію про користувачів, товари й інші сутності з різними даними.

Замість того, щоб створювати окремі маршрути для кожного користувача або продукту, можна використовувати динамічні параметри URL.

ВИКОРИСТАННЯ ПАРАМЕТРІВ URL (НАПРИКЛАД, :id)

Для створення динамічного маршруту React Router використовується синтаксис з двокрапкою. Наприклад, якщо у нас є сторінка профілю користувача, URL для кожного користувача може містити унікальний ідентифікатор, який передаватиметься до компонента:

<Route path="/user/:id" element={<UserProfile />} />

Тут :id — це динамічний параметр, який буде захоплений із URL. Коли користувач переходить за адресою /user/123, id дорівнюватиме 123.

Щоб отримати доступ до цього параметра всередині компонента, використовується хук useParams з бібліотеки react-router-dom:

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();

  return (
      <div>
        <h2>Профіль користувача {id}</h2>
        {/* Тут можна завантажити та відобразити дані користувача з цим id*/}
      </div>
  );
}

export default UserProfile;

У цьому прикладі значення параметра id передається через URL і компонент UserProfile може використовувати його для відображення відповідної інформації. Наприклад, можна зробити запит до бази даних, щоб отримати дані користувача із зазначеним ідентифікатором.

ВКЛАДЕНІ МАРШРУТИ (NESTED ROUTES)

Вкладені маршрути дозволяють створювати структуру, де один маршрут рендерить інший усередині себе. Це корисно для організації сторінок, які мають спільні компоненти, наприклад, панелі навігації.

Приклад використання: якщо у нас є профіль користувача з кількома вкладками (інформація, налаштування):

<Route path="/user/:id" element={<UserLayout />}>
  <Route path="info" element={<UserInfo />} />
  <Route path="settings" element={<UserSettings />} />
</Route>

НАВІГАЦІЯ МІЖ ДИНАМІЧНИМИ ТА ВКЛАДЕНИМИ МАРШРУТАМИ. ВИКОРИСТАННЯ USENAVIGATE ТА LINK

Для навігації між динамічними та вкладеними маршрутами в React Router використовуються компоненти Link і хук useNavigate. Компонент Link дозволяє створювати посилання, які автоматично обробляють зміну URL і рендеринг відповідного компонента. Наприклад:

<Link to={`/user/${id}/info`}>Iнформацiя</Link>

У цьому випадку при натисканні на посилання відбуватиметься перехід на сторінку інформації про користувача з певним ID.

Хук useNavigate дозволяє програмно керувати навігацією. Це особливо корисно, коли необхідно перенаправити користувача після виконання будь-якої дії, наприклад, після успішної аутентифікації:

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate(`/user/${id}/info`);

ПЕРЕДАЧА ДАНИХ МІЖ МАРШРУТАМИ

Передача даних між маршрутами може здійснюватися через об'єктstate, який передається в метод navigate. Це дозволяє надсилати інформацію без додавання її до URL. Наприклад, можна передати дані про те, звідки користувач прийшов:

navigate(`/user/${id}/info`, { state: { fromDashboard: true } });

У компоненті, на який відбувається перехід, можна отримати передані дані за допомогою хука useLocation:

import { useLocation } from 'react-router-dom';

const location = useLocation();
console.log(location.state); // { fromDashboard: true }

Це дозволяє ефективно передавати дані між сторінками, поліпшуючи взаємодію з користувачем і спрощуючи логіку програми.

Підсумовуючи, ми розглянули ключові аспекти роботи з роутингом у React, а саме:

базові маршрути;
динамічні URL-параметри;
вкладені маршрути.

Базові маршрути дозволяють створювати навігацію між різними сторінками додатка, динамічні маршрути дають можливість використовувати змінні в URL, як-от ідентифікатори користувачів чи товарів, а вкладені маршрути допомагають організувати структуру складних сторінок, де одні компоненти містять інші.

ДЕ МОЖНА ВИКОРИСТОВУВАТИ РОУТИНГ?

Якщо дуже коротко, то всюди. Роутинг у React застосовується в будь-якому односторінковому додатку (SPA), де важлива плавна навігація між сторінками без перезавантаження.

Він є буквально незамінним для сайтів з кількома розділами, таких як блоги, інтернет-магазини, особисті кабінети користувачів, адмінпанелі тощо.

Особливо корисним роутинг стає при роботі з динамічними даними, коли кожен елемент (користувач, товар, стаття) має свій унікальний ідентифікатор (що, погодьтеся, буває дуже часто).

У ЧОМУ Ж ПЕРЕВАГИ РОУТИНГУ?

Плавна навігація
Роутинг дозволяє користувачам переміщатися між сторінками без необхідності перезавантаження всієї сторінки, що покращує UX.
Динамічні параметри
URL-адреси можуть містити змінні параметри, що робить можливим відображення різних даних на основі одного шаблону сторінки.
Вкладені маршрути
Це допомагає організувати інтерфейси, де частини сторінок можуть повторно використовуватися, що спрощує структуру додатка.

Масштабованість: можливість додавання нових маршрутів і компонентів без необхідності перебудови всієї структури додатка.

ПОГОВОРІМО ПРО НАЙКРАЩІ ПРАКТИКИ В РОУТИНГУ

Чітка структура маршрутів
Організуйте маршрути так, щоб вони були логічними та зрозумілими. Використовуйте вкладені маршрути для ієрархії сторінок. Але робімо вкладеність адекватною. Пожалійте розробника, який буде дивитися на той код після вас.
Динамічні параметри
Використовуйте параметри URL, такі як :id, для передачі ідентифікаторів і налаштувань, щоб уникнути дублювання компонентів.
Захищені маршрути
Використовуйте спеціальні маршрути для захисту приватних сторінок, які повинні бути доступні лише авторизованим користувачам.
Ліниве завантаження компонентів
Для поліпшення продуктивності можна завантажувати компоненти динамічно за допомогою React.lazy та Suspense, особливо для великих додатків.

Якщо коротко, використання роутингу значно підвищує масштабованість і продуктивність додатків, роблячи їх більш гнучкими та зручними в експлуатації для кінцевих користувачів.

ВИСНОВОК

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

А якщо повернутися до технічної частини, то динамічний і вкладений роутинг дозволяють створювати гнучкі, зручні та масштабовані структури додатків.

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

І, звісно ж, зустрінемося наступного разу в цьому ж місці та в той самий час :)