Условная маршрутизация с помощью React Router 4

Условная маршрутизация с помощью React Router 4

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

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

Что мы будем создавать

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

Условная маршрутизация с помощью React Router 4

Ресурсы

Чтобы следовать этому руководству, вам понадобится следующее:

NodeJS, установленный на вашей машине

NPM, установленный на вашей машине

Чтобы проверить установку, выполните следующую команду:

Если в качестве результата вы получите номера версий пакетов, все в порядке.

Приступаем к работе

Установка React

В этой статье мы будем использовать React, который должен быть установлен на вашем компьютере. Чтобы установить React, выполните следующую команду:

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

Следующее, что вам нужно сделать, это установить необходимые модули, которые нужны, чтобы успешно создать эту демо-версию. Это: react-router-dom и react-media. Мы устанавливаем их, запустив команду:

Теперь мы можем запустить приложение, выполнив команду:

Создание компонента навигации

Логотип Github в центре страницы будет выполнять роль навигационной части нашего приложения. Давайте посмотрим, как это сделать. В папке src/ создайте новую папку с именем Nav, а в ней следующие файлы:

Вам нужно добавить логотип Github и сохранить его, как logo.svg.

Теперь обновите файл src/Nav/index.js, чтобы он выглядел следующим образом:

Компонент навигации имеет следующиеt стили:

Теперь давайте визуализируем компонент Nav. Для этого мы отредактируем файл src/App.js по умолчанию, чтобы он выглядел следующим образом:

Теперь, когда мы запускаем приложение, используя npm start и переходим в браузер, мы получаем следующее:

Условная маршрутизация с помощью React Router 4

Создание карточек пользователя

Условная маршрутизация с помощью React Router 4

Карточки пользователя отвечают за отображение информации о пользователе. Теперь давайте посмотрим, как их создать. В папке src/ приложения создайте новую папку Users, а в ней следующие файлы:

Измените файл UsersCard.js следующим образом:

Если вы обратите внимание на фрагмент кода выше, мы использовали компонент Link из agent-router-dom, чтобы предоставить возможность просматривать данные пользователя при клике на карточке. Таким образом, для данной карточки пользователя с идентификатором 10009 и компонентом Link будет генерироваться такой URL: //your-app/current-page/10009

//your-app/current-page представляет существующий URL-адрес

10009 представляет идентификатор пользователя.

Вся эта информация будет передаваться при визуализации компонента. Компонент имеет следующие стили:

Список всех пользователей

Условная маршрутизация с помощью React Router 4

То, что мы видим выше — это список пользователей. Чтобы наше приложение выглядело так, нам нужно сначала создать компонент UsersList. В каталоге src/Users создайте следующие файлы:

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

Давайте отредактируем UsersList.js следующим образом. Во-первых, мы выполняем импорт:

Функции listOfUsersPerRow и listOfRows обеспечивают, чтобы в каждой строке у нас было не больше карточек, чем указано. Следующее, что нужно сделать — это использовать функции для создания списка пользователей следующим образом

UsersList.css будет выглядеть так:

Создание представления информации пользователя

Условная маршрутизация с помощью React Router 4

При нажатии на карточку пользователя из списка пользователей, отображается одна карточка пользователя. Давайте посмотрим, как создать этот компонент. Создайте следующие файлы в каталоге src/Users:

Теперь добавим следующее в файл UsersDetails.js:

Создание компонента панели пользователей

Компонент панели пользователей прост. Мы отображаем UserList и при нажатии на карточку выводим сбоку экрана информацию без необходимости перезагрузки страницы. Давайте рассмотрим, как это реализовать. Создайте файл UsersDashboard.js в каталоге Users:

Измените UserDashboard.js следующим образом:

В приведенном выше примере мы использовали компонент Route, предоставляемый компонентом response-router-dom в качестве компонента для отображения информации конкретного пользователя при клике на карточке. Теперь давайте объединим все это. Обновите файл src/App.js, чтобы он выглядел следующим образом:

Когда мы перейдем в браузер, мы получим следующее:

Условная маршрутизация с помощью React Router 4

Условная маршрутизация с помощью React Router 4

Обратите внимание на разницу в URL-адресе, когда отображаются данные пользователя

Адаптивная маршрутизация

Все становится интереснее, когда пользователи посещают это приложение, независимо от размера экрана, они получают тот же вид и функционал. В реальных приложениях полезно предоставлять пользователю оптимальный опыт, и один из способов сделать это — обслуживать представления, в точности соответствующие их размерам устройства. Теперь мы рассмотрим, как это сделать в нашем приложении.

При посещении приложения на широком экране пользователь перенаправляется к маршруту приложения /dashboard, а при просмотре на меньшем экране пользователь должен быть направлен к маршруту приложения /users. Давайте посмотрим, как это сделать.
Обновите файл src/App.js, чтобы он выглядел следующим образом:

В приведенном выше фрагменте мы используем компонент Media, чтобы установить размер экрана. Если ширина экрана меньше 599 пикселей, мы устанавливаем набор, который хотим отобразить для разных маршрутов, а также перенаправляем маршруты / и /dashboard к маршруту /users.

Теперь, если размер экрана больше 599 пикселей, мы отображаем полную панель пользователя, как мы это делали ранее

Теперь, когда мы посещаем приложение, оно будет работать следующим образом:

Условная маршрутизация с помощью React Router 4

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

Заключение

В этой статье мы рассмотрели введение в компонентную маршрутизацию с помощью React и как реализовать условный рендеринг в приложениях React. Вот ссылка на полный репозиторий Github. Вы можете оставить комментарий или предложение ниже.

Автор: Chris Nwamba

Источник: //scotch.io/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: