React Router Dom V4 Маршрутизация

В этом уроке мы познакомимся с библиотекой react-router-dom, которая используется в многостраничных приложениях для маршрутизации. Рассмотрим такие составляющие как RouterLink, NavLink, Route, Switch, Redirect, History, включенные в библиотеку react-router-dom. Наиболее подходящим способом увидеть, как работает React Router v4, является написание простого многостраничного приложения React с использованием новых компонентов маршрутизатора. Но сначала давайте разберемся чем новая версия v4 отличается от предыдущей версии v3.

Содержание

  • React Router v4 и React Router v3 различия

  • Установка react-router-dom
  • Использование компонента Router
  • Использование компонента Route

  • Параметры маршрутов
  • Использование компонента Link

  • Компонент NavLink
  • Включающая маршрутизации
  • Компонент Switch — Исключающая маршрутизация
  • Browser History
  • Компонент Redirect

React Router v4 и React Router v3 различия

До v4 была версия v3, v4 — это полностью обновленная версия, так в чем же разница между этими двумя маршрутизаторами React? Вот краткий список большинства отличий:

  • В 4-ой версии маршрутизация больше не централизована, вместо этого она становится частью всего приложения и пользовательского интерфейса.
  • Все элементы, предназначенные для браузера, размещаются в отдельной библиотеке react-router-dom, а не в react-router, как раньше (в v3)
  • Добавлены новые компоненты, такой BrowserRouter — основной способ маршрутизации в браузере и HashRouter (см. Ниже).
  • Больше не нужно использовать дочерние свойство для вложенных элементов.
    Правила маршрутизации React Router v3 были исключающими друг друга, то есть только один маршрут мог обрабатываться одновременно. В 4 версии стала доступна поддержка вложенных маршрутов, что означает, что несколько маршрутов могут представлять древовидную вложенную структуру и отображаться одновременно.

React Router v4 был разделен на три пакета:

  • react-router: общие элементы ядра для версий dom и native
  • react-router-dom: версия dom, разработанная для браузеров или веб-приложений.
  • react-router-native: native версия, предназначенная для мобильных приложений.

Установка react-router-dom

Поскольку мы создаем web-приложение, а не мобильное приложение, нам необходимо установить пакет react-router-dom, поэтому внутри директории проекта необходимо выполнить одну из следующих команд:

Если вы используете npm, то установить можно следующей командой:

Так же можно установить через yarn:

Использование компонента Router

Использование маршрутизации в React начинается с базового элемента, который в 4-ой версии может быть одним из следующих:

  • BrowserRouter. Это реализация интерфейса маршрутизатора, которая использует API истории HTML5 для синхронизации пользовательского интерфейса с текущим адресом страницы браузера, то есть использует window.location.
  • HashRouter. Такой же, как и предыдущий маршрутизатор, но использует только hash-часть URL, то есть window.location.hash.
  • MemoryRouter. Компонент, который хранит информацию о маршрутах в памяти. Он не записывает и не читает  эти данные из URL.
  • NativeRouter. Используется для маршрутизации внутри мобильных приложений.
  • StaticRouter. Используется для статической маршрутизации.

Главные элементы маршрутизаторов, которые используются в web-приложениях — это BrowserRouter.  Немного реже использующийся элемент — HashRouter. Если на сервере с приложением используются динамические URL-адреса, нужно использовать BrowserRouter, но если ваш сервер не поддерживает динамические адреса, и работает только со статикой, тогда нужно использовать HashRouter. Пример подключения базового роутера.

Элемент Route в React Router Dom

<Route> является одним из наиболее главных элементов маршрутизации, выполняющих основную функцию библиотеки. Его идея проста: везде, где вы хотите что-то вывести, когда есть совпадение с путем адресной строки, вы должны определять Route (маршрут).
Данный класс принимает различные свойства (пропсов), например:

  • Путь (path): Тип строка , в нем содержится имя пути для сопоставления с адресной строкой.
  • Компонент (component): Определят имя компонента, который будет выводиться при совпадении пути.
  • Точное соответствие (exact): свойство указывает Route точно соответствовать пути (см. включающую и эксклюзивную маршрутизацию)
  • Строго соответствие (strict): свойство указывает Route соответствовать только маршруту с косой чертой.

Взамен свойства component есть 2 других свойства позволяющие сообщить Route, что ему нужно отобразить.

  • render: Функция, возвращающая элемент React. Так же может возвращать набор вложенных элементов.
  • children: Данное свойство похоже на render. Эта функция, должна вернуть компонент React. За исключением того, что этот элемент отобразиться в любому случае, даже если нет совпадения пути.
В большинстве случаев вы будете использовать параметр component, но есть также много ситуаций, когда вместо этого вам придется использовать свойства render или children.
Пример использование Route:

приведенный выше маршрут отобразит по url ‘/user-profile’ компонент UserProfilePage.

Пример использования свойства render:

Пример использования свойства children:

Параметры маршрутов

Часто возникает необходимость использовать различные переменные в маршрутах, для передачи этих переменных другим страницам. Мы можем объявить переменную через двоеточие плюс имя переменной, Например:

Данный маршрут будет соответствовать URL: ‘/product/10

Для того, что бы внутри компонента получить переменную, необходимо использовать свойство match.

В маршруты можно передавать неограниченное количество переменных

React Router Dom использование — Link

Ссылки (Link) — данный компонент React Router v4, разработанный в качестве замены простых ссылок браузеров, для создания элементов навигации приложения, который позволят пользователям перемещаться между различными страницами приложения. Обычные ссылки браузера перезагружают всю страницу, в то время как <Link/> перезагружают только те части приложения, которые соответствуют пути расположения браузера.
<Link/> принимает свойство to, которое сообщает React Router пункт назначения. Например:

Если нажать на эту ссылку, она отправит нас по адресу ‘/profile-page’

Link может принимать и другое свойство: replace — если установлено в true, то при переходе по ссылке в истории браузера предыдущая страница будет заменяться, а не добавляться новая. Это приведет к тому что кнопка Назад в браузере будет перебрасывать не на обратную страницу, а через одну. Replace true полезно устанавливать тогда, когда мы точно знаем что переход на предыдущую страницу пользователю не понадобиться и будет бесполезным (например после удаления какой-то записи, когда она перестанет существовать предыдущая страница может вернуть 404 ошибку).

Компонент NavLink

NavLink очень похож на Link, и выполняет ту же самую функцию, но с различием в том что он добавляет информацию о стиле к отображаемому элементу (элементам), например:

Включающая маршрутизации

По умолчанию в 4-ой версии роутера, используется включающую маршрутизацию, это значит что будут выводиться все компоненты маршрутов которые хотя бы частично совпадают с URL. В примере ниже если мы перейдем по адресу /about/contact, то выведется 3 блока — MainPage, AboutPage, ContactPage

Что бы избежать вывода всех 3 элементов можно использовать свойство exact, которое ‘говорит’ компоненту, отображаться только если путь точно соответствует маршруту.

Компонент Switch — Исключающая маршрутизация

Исключающая маршрутизация является инверсией включающей маршрутизации. React Router v3 по умолчанию работал именно так. Отображалось только первое совпадение. В v4 можно сделать тоже самое, используя компонент Switch. В Switch будет отображаться только первый элемент <Route> или <Redirect> который соответствует URL.

Browser History

Реакт предполагает использование объекта истории, который определяет простой API для управления и манипулирования историей браузера. С помощью этого объекта можно выполнять редирект.

Компонент Redirect

Когда вы хотите выполнить перенаправление на иную страницу текущего приложения, в возвращаемой функции компонента можно вернуть <Redirect/>. Этот элемент имеет одно свойство ‘to‘, которое определяет маршрут перенаправления

В данном примере выше, если пользователь перейдет по адресу ‘/about/contact‘, он будет перенаправлен на главную страницу. Помимо строки, параметр to может принимать объект со свойствами:

Свойства данного объекта означают:

  • pathname — название маршрута перенаправления.
  • search — параметры маршрута.
  • state — данные передаваемые другому компоненту.

Заключение

Библиотека, рассмотренная нами в данном уроке, упрощает создание многостраничных приложений со сложным интерфейсом, предполагающим маршрутизацию между разными частями приложения. Вы можете создать древовидную структуру маршрутов вкладывая их друг в друга, а так же использовать различные подходы к маршрутизации, такие как Включающие и исключающие маршруты. Вы также можете передавать различную информацию между маршрутами, используя параметры, которые могут быть получены и извлечены из компонентов. Все строительные блоки React Router v4, предназначенные для маршрутизации веб-приложений, доступны и могут быть импортированы из react-router-dom.

 

Добавить комментарий

Ваш e-mail не будет опубликован.