Как настроить react router dom

5.6 Маршрутизация

Здесь мы поговорим о такой важной составляющей любого серьезного веб-приложения, как маршрутизация. Пользователь должен видеть где он находится в данный момент времени в приложении, а также иметь возможность навигации по истории. Сам по себе React маршрутизацию не поддерживает, зато есть мощные библиотеки с целым арсеналом возможностей. Как раз одну из таких библиотек мы интегрируем в наш проект.

5.6.1 Для чего нужна маршрутизация?

В любом реальном веб-приложении нужны маршруты, и приложение React не исключение. Пользователь должен видеть, где он находится в приложении в любой момент времени. А видит он свое текущее местоположение в адресной строке браузера. Следовательно приложение должно уметь сопоставлять определённый URL с соответствующей ему страницей. То есть, если мы введём в адресную строку например https://health-imperium/appointmens , то приложение должно направить нас на страницу списка приёмов, но не на какую-либо другую.

Также должна работать история. То есть когда пользователь кликает на стрелку «Назад» в браузере, приложение должно направить нас на предыдущую страницу.

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

На данный момент есть несколько популярных библиотек для маршрутизации: react-router , router5 , aviator и пр. Полный список можно посмотреть здесь. Мы будем использовать react-router . Хотя в вашем проекте может быть любая другая — все зависит от бизнес-требований.

5.6.2 Библиотека react-router

Эта библиотека популярна, довольна проста в использовании и обладает хорошей документацией. Она предоставляет такие возможности как:

Навигация по клику (компонент
)

Маршрутизация (компонент Route )

История (свойство history )

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

5.6.3 Добавление react-router в приложение

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

Теперь подключим в наше приложение эту возможность, обновив файл index.js :

Мы создали объект кастомной истории и передали его как свойство в компонент . Этого можно и не делать. Достаточно использовать компонент
вместо , тогда будет использован API истории HTML5.

Далее необходимо подключить саму библиотеку react-router . Для этого нужно установить модуль react-router-dom .

Как видно, у нас пока два маршрута: /home и /appointments . Введя в адресную строку один из них, приложение перенаправит нас на соответствующую страницу. Элемент здесь задаёт страницу по умолчанию. Отдельно стоит поговорить о withRouter . Это старший компонент, он же HOC. С помощью него вы можете получить доступ к свойствам объекта history и к объекту match , ближайшего . withRouter будет передавать в обёрнутый компонент обновленные свойства match , location , и history каждый раз, когда тот отрисовывается.

Наконец, нам осталось обновить компонент , добавив в него навигацию, с помощью компонента
:

Все необходимые изменения сделаны, и теперь вы можете протестировать работу приложения, открыв его в отдельной вкладке:

Перейдя на новую вкладку вы увидите текущий путь в адресной строке:

Теперь попробуйте перейти на список приёмов и понаблюдайте за изменением текущего пути. Затем вернитесь назад, нажав на соответствующую кнопку в браузере. Сейчас вы видите маршрутизацию и историю в действии.

Источник

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

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

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

Использование компонента 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, то установить можно следующей командой:

Источник

Простой туториал React Router v4

React Router v4 — это переработанный вариант популярного React дополнения. Зависимые от платформы конфигурации роутов из прошлой версии были удалены и теперь всё является простыми компонентами.

Этот туториал покрывает всё что вам нужно для создания веб-сайтов с React Router. Мы будем создавать сайт для локальной спортивной команды.

Хочешь посмотреть демку?

Установка

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

react-router предоставляет базовые функции и компоненты для работы в двух окружениях(Браузере и react-native)

Мы будем создавать сайт который будет отображаться в браузере, поэтому нам следует использовать react-router-dom . react-router-dom экспортирует из react-router все функции поэтому нам нужно установить только react-router-dom .

Router

При старте проекта вам нужно определить какой тип роутера использовать. Для браузерных проектов есть BrowserRouter и HashRouter компоненты. BrowserRouter — следует использовать когда вы обрабатываете на сервере динамические запросы, а HashRouter используйте когда у вас статический веб сайт.

Обычно предпочтительнее использовать BrowserRouter , но если ваш сайт расположен на статическом сервере(от перев. как github pages), то использовать HashRouter это хорошее решение проблемы.
Наш проект предполагает использование бекенда поэтому мы будем использовать BrowserRouter .

История — History

Каждый Router создает объект history который хранит путь к текущему location[1] и перерисовывает интерфейс сайта когда происходят какие то изменения пути.

Остальные функции предоставляемые в React Router полагаются на доступность объекта history через context, поэтому они должны рендериться внутри компонента Router.

Заметка: Компоненты React Router не имеющие в качестве предка компонент Router не будут работать, так как не будет доступен context.

Рендеринг Router

Компонент Router ожидает только один элемент в качестве дочернего. Что бы работать в рамках этого условия, удобно создать компонент который рендерить всё ваше приложение(это так же важно для серверного рендеринга).

App компонент

Routes

компонент это главный строительный блок React Router’а. В том случае если вам нужно рендерить элемент в зависимости от pathname URL’ов, то следует использовать компонент

Path — путь

принимает path в виде prop который описывает определенный путь и сопоставляется с location.pathname.

В примере выше сопоставляет location.pathname который начинается с /roster[2]. Когда текущий location.pathname сопоставляется положительно с prop path то компонент будет отрендерен, а если мы не можем их сопоставить, то Route ничего не рендерит[3].

Заметка: Когда речь идет о пути React Router думает только о пути без домена. Это значит, что в адресе:

React Router будет видеть только /my-projects/one

Сопоставление пути

npm пакет path-to-regexp компилирует prop path в регулярное выражение и сопоставляет его против location.pathname. Строки path имеют более сложные опции форматирования чем объясняются здесь. Вы можете почитать документацию.

Когда пути сопоставляются создается объект match который содержит свойства:

• url — сопоставляемая часть текущего location.pathname
• path — путь в компоненте Route
• isExact — path в Route === location.pathname
• params — объект содержит значения из path которые возвращает модуль path-to-regexp

Заметка: Можете поиграться с тестером роутов и посмотреть как создается объект match.

Заметка: path в Route должен быть абсолютным[4].

Создание наших роутов

Компонент Route может быть в любом месте в роутере, но иногда нужно определять, что рендерить в одно и тоже место. В таком случае следует использовать компонент группирования Route’ов — . итеративно проходит по дочерним компонентам и рендерит только первый который подходит под location.pathname.

У нашего веб-сайта пути которые мы хотим сопоставлять такие:

• / — Главная страница
• /roster — Страница команд
• /roster/:number — Страница профиля игрока по номеру
• /schedule — Расписание игр команды

По порядку сопоставления путей в нашем приложении, все что нам нужно сделать это создать компонент Route с prop path который мы хотим сопоставить.

Что делает рендер компонента Route?

У Route есть 3 props’a которые описывают каким образом выполнить рендер сопоставляя prop path с location.pathname и только один из prop должен быть представлен в Route:

• component — React компонент. Когда роут удовлетворяется сопоставление в path, то он возвращает переданный component (используя функцию React.createElement).
• render — функция которая должна вернуть элемент React. Будет вызвана когда удовлетворится сопоставление в path. Render довольно похож на component, но используется для inline рендеринга и подстановки необходимых для элемента props[5].
• children — в отличие от предыдущих двух props children будет всегда отображаться независимо от того сопоставляется ли path или нет.

В типичных ситуациях следует использовать component или render. Children prop может быть использован, но лучше ничего не делать если path не совпадает с location.pathname.

Элементу отрендеренному Route будет передано несколько props. match — объект сопоставления path с location.pathname , location объект[6] и history объект(созданный самим роутом)[7].

Сейчас мы опишем основную структуру роутера. Нам просто нужно отобразить наши маршруты. Для нашего приложения мы будем использовать компонент и компонент внутри нашего компонента который поместит сгенерированный HTML удовлетворяющий сопоставлению path внутри.

Заметка: Route для главной страницы содержит prop exact , благодаря которому пути сравниваются строго.

Унаследованные роуты

Профиль игрока /roster/:number не включен в . Вместо этого он будет рендериться компонентом который рендериться всякий раз когда путь начинается с /roster .

В компоненте Roster мы создадим компоненты для двух путей:

• /roster — с prop exact
• /roster/:number — этот route использует параметр пути, который будет отловлен после /roster

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

К примеру может быть отрендерен с заголовком который будет отображаться во всех роутах которые начинаются с /roster .

Параметры в path

Иногда нам требуется использовать переменные для получения какой либо информации. К примеру, роут профиля игрока, где нам требуется получить номер игрока. Мы сделали это добавив параметр в prop path .

:number часть строки в /roster/:number означает, что часть path после /roster/ будет получена в виде переменной и сохранится в match.params.number . К примеру путь /roster/6 сгенерирует следующий объект с параметрами:

будет использовать props.match.params для получения нужной информации которую следует отрендерить.

Заметка: Вы можете больше изучить о параметрах в путях в пакете path-to-regexp

Наряду с компонентом

наш веб-сайт использует и другие как , и .

Ссылки

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

который предотвращает перезагрузку. Когда мы кликаем на

он обновляет URL и React Router рендерит нужный компонент без обновления страницы.

использует prop to для описания URL куда следует перейти. Prop to может быть строкой или location объектом (который состоит из pathname, search, hash, state свойств). Если это строка то она конвертируется в location объект.

Заметка: Пути в компонентах
должны быть абсолютными[4].

Работающий пример

Весь код нашего веб сайта доступен по этому адресу на codepen.

Route готов!

Надеюсь теперь вы готовы погрузиться в изучение деталей маршрутизации веб приложений.

Мы использовали самые основные компоненты которые вам понадобятся при создании собственных веб приложений (
, , and
), но есть еще несколько компонентов и props которые здесь не рассмотрены. К счастью у React Router есть прекрасная документация где вы можете найти более подробное объяснение компонентов и props. Так же в документации предоставляются работающие примеры с исходным кодом.

Пояснения

[1] — Объект location описывает разные части URL’a

[2] — Вы можете использовать компонент без path. Это полезно для передачи методов и переменных которые храняться в context .

[3] — Если вы используете prop children то route будет отрендерен даже если path и location.pathname не совпадают.

[4] — Сейчас ведется работа над относительными путями в и

. Относительные

более сложные чем могут показаться, они должны быть разрешены используя свой родительский объект match , а не текущий URL.

[5] — Это stateless компонент. Внутри есть большая разница между render и component . Component использует React.createElement для создания компонента, в то время как render используется как функция. Если бы вы определили inline функцию и передали через нее props то это было бы намного медленнее чем с использованием функции render .

[6] — Компоненты и могут оба использовать prop location. Это позволяет сопоставлять их с path, который фактически отличается от текущего URL’а.

[7] — Так же передают staticContext , но он полезен только при рендере на сервере.

Источник