Рассказали, что такое React Router, что такое маршрутизация, для чего она нужна и как настроить простую и вложенную маршрутизацию на сайте. Привели примеры кода.

— Что такое React Router и кому это нужно
— Установка React Router
— Создание простых маршрутов
— Создание вложенных маршрутов

Что такое React Router и кому это нужно

React Router – это библиотека для навигации между разными частями веб-приложения, созданными на React. Она позволяет менять содержимое страницы без перезагрузки браузера, что делает приложение более интерактивным и удобным для пользователей.

Она была разработана в 2014 году Дэном Абрамовым и Майклом Джексоном. Они заметили, что в React не хватает инструмента для удобной работы с маршрутизацией – как раз процессом переключения компонентами React. Приложения на React не могли легко менять содержимое страницы без перезагрузки, что было неудобно для пользователей и не соответствовало потребностям современных веб-приложений.

React Router решает эту проблему. Библиотека помогает создавать одностраничные приложения (SPA), где пользователь может перемещаться по разным URL, и каждый URL отображает нужный компонент без перезагрузки всей страницы.

Подсказка: SPA (Single Page Application) – это тип веб-приложений, которые загружают только одну HTML-страницу и динамически обновляют ее содержимое без перезагрузки страницы. Вместо того, чтобы загружать новые страницы с сервера при каждом переходе, SPA загружают только необходимые данные и обновляют содержимое на текущей странице, используя JavaScript и AJAX-запросы.

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

Установка React Router

В первую очередь, создайте новый проект React.

После этого установите React Router DOM, которая работает в веб-приложениях.

Создание простых маршрутов

Допустим, у вас есть два компонента: Home.js и About.js, которые вы хотите использовать для отображения на разных страницах.

Создайте эти компоненты в вашем проекте:

Отредактируйте App.js, чтобы добавить маршруты для созданных вами компонентов.

Запустите приложение React:

Теперь откройте браузер и перейдите по адресу ниже, чтобы открыть страницу Home.

Откройте About, чтобы увидеть страницу “О нас”.

Поздравляем, вы настроили простую маршрутизацию.

Создание вложенных маршрутов

Кроме простой маршрутизации, в React Router есть и вложенная – это использование маршрутов внутри других маршрутов. Она нужна, если у вас есть компоненты, которые сами по себе имеют свою собственную логику маршрутизации.

Давайте представим, что у вас есть веб-приложение с разными страницами: “Главная”, “О нас”, “Контакты”. Каждая из этих страниц может содержать свои собственные разделы с дополнительным контентом и функциональностью.

Вложенная маршрутизация позволяет создавать подразделы внутри этих страниц. Например, на странице “О нас” вы можете иметь свои собственные подстраницы: “История”, “Команда”, “Наши ценности”.

React Router позволяет определять маршруты для этих подстраниц внутри компонентов страниц.

Давайте представим, что у нас есть компонент Dashboard, который имеет свою собственную маршрутизацию для отображения различных частей панели управления, таких как Overview, Settings, Profile и так далее.

В компоненте Dashboard мы используем useRouteMatch из React Router, чтобы получить текущий путь и URL. Используя Link, мы создаем ссылки для перехода к разным частям панели управления. Внутри Switch мы определяем вложенные маршруты для отображения компонентов в зависимости от текущего URL.

Каждый вложенный маршрут начинается с ${path}, чтобы создавать правильные вложенные URL для компонентов. Это помогает React Router правильно выбирать, какой компонент отобразить на экране при совпадении URL.

В реальных приложениях структура и вложенность маршрутов может быть сложнее, но основной принцип остается тем же.

Итоги

— React Router – это библиотека для маршрутизации компонентов в веб-приложении;
— Библиотека помогает создавать одностраничные приложения (SPA), которые подгружают не всю страницу при переходе, а только нужные компоненты, чтобы ускорить сайт;
— Кроме простой маршрутизации, есть и вложенная. Она помогает изменять компоненты, если внутри элементов есть другие динамические элементы.
— Чтобы настроить маршрутизацию, используйте хуки из React Router DOM.