Владимир Шайтан 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 параметрами, а вложенные маршруты помогают структурировать интерфейс с общей навигацией. Эти подходы упрощают разработку сложных программ, где необходимо гибко управлять разными уровнями страниц и компонентов, делая код более поддерживаемым.

И, конечно же, встретимся в следующий раз в этом же месте и в то же время :)