React Router: что это и как использовать
Рассказали, что такое React Router, что такое маршрутизация, для чего она нужна и как настроить простую и вложенную маршрутизацию на сайте. Привели примеры кода.
5К открытий25К показов
Рассказали, что такое React Router, что такое маршрутизация, для чего она нужна и как настроить простую и вложенную маршрутизацию на сайте. Привели примеры кода.
- Что такое React Router и кому это нужно
- Установка React Router
- Создание простых маршрутов
- Создание вложенных маршрутов
Используете маршрутизацию?
Нет
Да, в React
Да, в Node.js
Да, но использую другой инструмент
Что такое 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.
5К открытий25К показов