React Router v5

React Router v5 – это стабильная и широко используемая версия маршрутизатора для React, которая сочетает в себе компонентный подход v4 и новые удобные возможности, такие как пользовательские хуки.

Параметры URL

Параметры URL помогают динамически передавать данные через адресную строку. В React Router v5 их использование предельно интуитивно благодаря компоненту Route и объекту match.

Когда применять параметры URL

• Для отображения динамических страниц, например профилей пользователей.
• Для создания страниц товаров или постов.
• Для логической группировки связанных маршрутов.

Основной пример

Обычно параметры URL передаются через синтаксис /users/:id, а получить их можно с помощью пропса match.params или хука useParams.

Вложенные маршруты

Вложенные маршруты позволяют структурировать интерфейс и выстраивать многоуровневую навигацию. Это удобно для личного кабинета, админ‑панели или разделов настроек.

Преимущества вложенных маршрутов

• Лучшая организация кода.
• Гибкая структура интерфейса.
• Наглядная маршрутизация без избыточной логики.

Передача props

В React Router v5 передача props в компоненты маршрутов может осуществляться несколькими способами. Особую роль играет свойство render, позволяющее гибко управлять пропсами и маршрутизацией.

Программная навигация

В условиях большого количества устаревших примеров важно использовать корректные методы программной навигации. В v5 для этого используется history и хук useHistory.

Когда нужна программная навигация

• После успешной отправки формы.
• После логина или логаута.
• Для редиректов внутри бизнес‑логики.

Query Strings

Комбинируя React Router v5 и встроенный Web API URLSearchParams, вы можете безопасно разбирать и формировать Query Strings для фильтрации, сортировки или передачи дополнительных параметров.

404 страницы

Чтобы корректно обрабатывать неизвестные маршруты, используется перехват всех путей в конце списка маршрутов. Компонент Switch отображает первый подходящий маршрут, что делает его идеальным для реализации страницы «404».

Ambiguous Matches (неоднозначные совпадения)

В ситуациях с пересекающимися маршрутами (например, /settings и /:uid) важно правильно упорядочить маршруты или использовать дополнительные атрибуты, чтобы устранить неоднозначность.

Передача props в Link

Link можно расширять и кастомизировать, передавая ему props для стилизации, управления поведением или интеграции со сторонними UI‑библиотеками.

Sidebars

Создание боковых панелей часто требует интеграции Link и NavLink с динамическим стилем и активными состояниями. React Router v5 отлично подходит для подобной архитектуры.

Настройка ссылки (кастомный Link)

Поскольку Link – это обычный React‑компонент, вы можете строить собственные навигационные элементы с дополнительной логикой: логированием кликов, проверкой условий перехода, анимацией.

Проект: «Хэш История Баскетбольной Лиги»

Практический проект позволяет закрепить ключевые навыки: работу с хэш‑историей, маршруты, параметры, вложенные компоненты и интеграцию с UI‑логикой.

Защищенные маршруты

Приватные (protected) маршруты обеспечивают доступ только авторизованным пользователям. Обычно реализуются через обертку над Route, проверяющую состояние аутентификации.

Разделение кода

Code splitting снижает нагрузку на первый рендер. В React Router v5 часто используется в связке с React.lazy и Suspense, позволяя подгружать маршруты по мере необходимости.

Конфигурация маршрутов

Хотя в v5 основная философия – компонентный подход, при необходимости можно построить конфигурационный объект маршрутов и рендерить их динамически.

Предотвращение переходов

Чтобы предупреждать пользователя о потере данных (например, при незавершенной форме), применяют Prompt или кастомные решения на основе history.block.