В первой части нашего цикла мы заложили фундамент, разобравшись с основами маршрутизации в React и такими компонентами, как BrowserRouter, Routes, Route и Link. Эти знания позволяют создать базовую навигацию в приложении. Однако для построения по-настоящему динамичных и интерактивных интерфейсов необходимо освоить более продвинутые возможности библиотеки React Router.
Вторая часть нашего руководства посвящена углубленному изучению инструментов, которые делают навигацию умной, а данные — интегрированными в адресную строку. Мы детально рассмотрим компонент NavLink, который расширяет возможности обычного Link, а также погрузимся в мир динамических маршрутов и научимся работать с параметрами URL с помощью мощных хуков.
Одной из ключевых задач при построении навигационного меню является визуальное выделение текущего раздела. Стандартный компонент Link не отслеживает активное состояние. Для решения этой задачи идеально подходит специальный компонент <NavLink />.
NavLink является расширенной версией Link и обладает уникальной способностью автоматически добавлять класс или inline-стили к ссылке, когда путь, на который она ведет, совпадает с текущим URL. Это позволяет легко реализовать подсветку активного пункта меню, что значительно улучшает пользовательский опыт. Настройка NavLink интуитивно понятна: разработчик указывает, какой класс или стили должны применяться при активном состоянии, а React Router берет на себя всю логику их добавления и удаления. Эта функциональность является стандартом для создания профессиональной навигации в React-приложениях.
Реальные приложения редко работают со статичными страницами. Например, страница товара, профиль пользователя или статья в блоге должны отображать разные данные в зависимости от идентификатора (ID), переданного в адресной строке. Для этого в React Router используются динамические маршруты.
Создать такой маршрут просто: в атрибуте path компонента <route> используется двоеточие, после которого указывается имя параметра, например: path="/users/:userId". Когда пользователь переходит по адресу /users/123, значение 123 становится доступным внутри компонента, связанного с этим маршрутом. Для доступа к этому значению предназначен хук useParams().
Хук useParams() возвращает объект, содержащий все параметры, извлеченные из URL-строки. В нашем примере вызов const { userId } = useParams(); внутри компонента даст нам возможность использовать userId со значением "123" для последующей загрузки данных о конкретном пользователе. Это основа для построения любых детализированных представлений в роутинге React приложений.
Помимо параметров пути, URL может содержать query-параметры (параметры поисковой строки), которые начинаются после знака вопроса ?, например: /search?query=react&sort=date. Эти параметры часто используются для фильтрации, сортировки и передачи необязательных настроек.
Для удобной работы с ними React Router предоставляет хук useSearchParams(). Этот хук очень похож на знакомый useState и возвращает массив, содержащий объект URLSearchParams для чтения текущих параметров и функцию для их обновления. В отличие от useParams, который используется для обязательных параметров пути, useSearchParams идеален для управления опциональными настройками, такими как строка поиска, фильтры или номер страницы в пагинации. Использование этого хука позволяет синхронизировать состояние интерфейса с адресной строкой, что делает URL полноценной частью состояния приложения.
Освоение компонента <NavLink />, динамических маршрутов и хуков useParams() и useSearchParams() выводит ваши навыки маршрутизации в React на новый уровень. Вы получаете инструменты для создания сложной, ориентированной на данные навигации, где URL становится не просто адресом, а источником параметров для ваших компонентов. В следующей, заключительной части, мы разберем такие критически важные темы, как защищенные маршруты, ленивая загрузка компонентов и обработка ошибок 404.