Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Создание одностраничных React приложений, используя модули React-Router и React-Transition-Group

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Oleg Kiselevich (you can also view the original English article)

Этот урок поможет вам научиться использовать модули react-router и react-transition-group для создания многостраничных React приложений с эффектами перехода между страницами.

Подготовка React Приложения

Установка пакета create-react-app

Если вам доводилось использовать React, вы скорее всего знаете о пакете create-react-app, который существенно упрощает создание среды разработки React. 

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

Итак, во-первых, убедитесь, что Node.js установлен на вашем компьютере. Вместе с ним будет установлен и npm.

В терминале выполните команду npm install -g create-react-app. Это позволит установить пакет create-react-app глобально на ваш компьютер.

После завершения установки вы можете убедиться в наличии пакета, выполнив команду create-react-app -V.

Создание проекта React

Настало время создавать наш React проект. Просто выполните команду create-react-app multi-page-app. Вы, конечно же, можете заменить multi-page-app на любое другое название.

Теперь create-react-app создаст директорию под названием multi-page-app. Выполните команду cd multi-page-app для смены текущей директории, а затем npm start для запуска локального сервера.

Вот и все. Теперь ваше React приложение запущено на вашем локальном сервере.

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

В папке src удалите все, кроме файлов App.js и index.js. Затем откройте index.js и замените его содержимое на следующий код.

По сути, мне пришлось удалить строчки, связанные с registerServiceWorker, а также строчку import './index.css';.

Также следует заменить содержимое файла App.js на следующий код.

Теперь следует установить необходимые модули.

В вашем терминале выполните следующие команды для установки react-router и react-transition-group соответственно.

npm install react-router-dom --save

npm install react-transition-group@1.x --save

После установки этих пакетов, вы можете проверить файл package.json в основной директории вашего проекта для того, чтобы убедиться, что это модули были добавлены в раздел dependencies.

Компоненты Адресации

Существуют два разных варианта адресации: HashRouter и BrowserRouter.

Как следует из названия, HashRouter использует хэши для учета ваших ссылок - такая адресация подходит для статических серверов. С другой стороны, если вы используете динамический сервер, то более правильным выбором будет BrowserRouter, учитывая что с ним ваши URL'ы будут выглядеть красивее.

Как только вы определились с выборов варианта адресации, перейдите в файл index.js и добавьте соответствующий компонент.

import { HashRouter } from 'react-router-dom'

Далее следует обернуть компонент <App> в выбранный компонент адресации.

Таким образом финальный вариант вашего файла index.js должен выглядеть следующим образом:

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

Оборачивая наш компонент <App>, мы передаем нашему приложению объект history, таким образом другие компоненты react-router могут взаимодействовать друг с другом.

Внутри компонента <App/>

Внутри нашего компонента <App> мы создадим два компонента <Menu> и <Content>. Как следует из названий, они будут содержать меню навигации и отображаемый контент соответственно.

Создайте папку под названием "components" в вашей директории src, внутри которой создайте файлы Menu.js и Content.js.

Menu.js

Давайте наполним содержимым компонент Menu.js.

Это будет функциональный компонент без указания состояния, поскольку нам не нужны для него состояния и сценарии жизненного цикла. 

Теперь добавим тэг <ul> с вложенными тегами <li>, которые и будут нашими ссылками.

Теперь добавьте следующую строку в ваш компонент Menu.

import { Link } from 'react-router-dom'

И затем оберните содержимое тэгов <li> в компонент <Link>.

Компонент <Link> - это по сути компонент react-router, который функционирует как тэг <a>, но не перезагружает вашу страницу на соответствующую целевую ссылку.

Также, если вы добавите стили CSS для вашего тэга a, то заметите, что компонент <Link> получит такое же оформление. 

Обратите внимание на наличие более продвинутой версии компонента <Link>, которая называется <NavLink>. Она предоставляет дополнительные возможности для оформления активных ссылок.

Теперь необходимо определить, куда будет вести каждая ссылка. Для этик целей у компонента <Link> есть свойство to.

Content.js

Внутри нашего компонента <Content>, мы определим соответствие Адресов (Routes) Ссылкам (Links)

Нам понадобятся компоненты Switch и Route из react-router-dom. Так что сперва импортируем их.

import { Switch, Route } from 'react-router-dom'

Во-вторых, импортируем компоненты, на которые мы будем переадресовывать трафик. Для нашего примера используются компоненты Home, Works и About. После того, как данные компоненты были созданы внутри папки components, нам также следует их импортировать.

import Home from './Home'

import Works from './Works'

import About from './About'

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

Switch

Мы используем компонент <Switch> для группировки компонентов <Route>. Switch отыскивает все Маршруты и возвращает первый подходящий под требования.

Route

Routes (маршруты) - это компоненты для вызова вашего целевого компонента, если он соответствует свойству path.

Окончательная версия нашего файла Content.js выглядит следующим образом:

Обратите внимание, что требуется добавить дополнительное свойство exact для компонента Home, который отвечает за главный раздел. Использование exact заставляет Route искать точное соответствие пути к файлу. Если не использовать его, то другие пути, начинающиеся с / также будут соответствовать компоненту Home, и таким образом для каждой ссылки будет выводиться компонент Home.

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

Анимация Переходов при Маршрутизации

Итак, у нас имеется рабочая система маршрутизации. Теперь мы добавим анимацию при переходах. Для этого будем использовать модуль react-transition-group.

Мы добавим анимацию для состояния монтирования каждого компонента. Когда вы осуществляете переход между разными компонентами с помощью компонента Route внутри Switch, вы по сути монтируете и извлекаете соответствующие компоненты.

Мы будем использовать react-transition-group в каждом компоненте, анимацию которого собираемся добавить. Таким образом можно использовать разную анимацию монтирования для каждого компонента. Я буду использовать только один вид анимации для всех. 

Для примера рассмотрим компонент <Home>.

Сперва нужно импортировать CSSTransitionGroup.

import { CSSTransitionGroup } from 'react-transition-group'

Далее нужно обернуть в него ваше содержимое.

Поскольку мы работаем с состоянием монтирования компонента, то необходимо подключить transitionAppear и выставить для него временной промежуток. Также следует отключить transitionEnter и transitionLeave, поскольку они действуют только после того, как компонент был смонтирован. Если вы планируете добавлять анимацию для дочерних элементов компонента, то вам необходимо будет использовать эти свойства. 

В заключение, добавьте уникальное название transitionName, на которое можно будет ссылаться в файле CSS.

Мы также импортировали файл CSS, в котором мы определяем CSS переходы.

Если вы обновите страницу, то должны будете увидеть эффект замедленного появления компонента Home.

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

Заключение

В данном уроке мы познакомились с модулями react-router-dom и react-transition-group. Однако их возможности выходят за рамки того, о чем вы узнали сегодня. Вот ссылка на рабочий пример того, о чем мы говорили. 

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

За последние несколько лет популярность React возросла. Кстати, у нас тоже есть несколько продуктов, которые вы можете приобрести, оценить, применить и т.п. Если вы ищете дополнительные ресурсы по React, вы можете без сомнения с ними ознакомиться

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.