React as библиотека часто используется для создания одностраничных приложений (SPA). SPA, как правило, имеют несколько просмотров страниц. При переходе от просмотра одной страницы к другой перезагрузка просмотра всей страницы является утомительной и не столь изобретательной задачей. Фактически, это уменьшает возможность использования SPA. Чтобы сделать его находчивым и выполнить свой вариант использования, SPA должен при необходимости отображать части представлений, а не перезагружать всю страницу.

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

TLDR:

  • Требования
  • Начиная
  • Первый маршрут с React Router
  • Что такое BrowserRouter?
  • Компонент Link
  • Активные ссылки с NavLink
  • Добавление параметров в маршруты
  • Подключение поддержки Crowdbotics к вашему репозиторию Github
  • Заключение

Требования

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

  • NodeJS v8.x.x или выше установлен вместе с npm / yarn
  • create-react-app установленный глобально на локальном компьютере разработчика, сгенерируйте новый проект React

Бонус: вы также можете использовать npx для создания нового проекта React без установки приложения create-response-app.

Начиная

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

После создания проекта перейдите во вновь созданный каталог. Эта стратегия является способом по умолчанию для создания нового приложения React.

React Router в виде библиотеки содержит три разных пакета npm:

  • react-router
  • react-router-dom
  • react-router-native

Каждый из пакетов имеет разные варианты использования. Первый react-router является основным пакетом и используется со следующими двумя пакетами, перечисленными выше. react-router-dom необходимо использовать при создании веб-приложения. Это то, что мы собираемся использовать в этом уроке. Последний react-router-native обычно используется в приложении React Native.

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

Обратите внимание, что в оставшейся части руководства мы будем использовать yarn в качестве диспетчера пакетов JavaScript для добавления или удаления зависимостей. Если вы хотите использовать npm, вас никто не остановит.

Чтобы запустить приложение React, перейдите в окно терминала и выполните команду npm start. Это запустит сервер разработки. Вас встретит стандартный экран проекта по умолчанию в окне веб-браузера по URL-адресу http://localhost:3000/.

Первый маршрут с React Router

Чтобы создать первый маршрут в приложении React, давайте импортируем BrowserRouter из react-router библиотеки.

Для создания маршрута мы используем <Route> из react-router-dom. Здесь и размещается логика маршрутизации. Он отображает пользовательский интерфейс компонента. У <Route> есть свойство path, которое всегда соответствует текущему местоположению приложения. На основе этой опоры рендерится желаемый компонент. Когда компонент не отображается, Route возвращает null. Имя компонента также передается как prop component. Посмотрите на приведенный ниже фрагмент.

Существует функциональный App компонент, который возвращает BrowserRouter, содержащий самый первый Route компонент. path в настоящее время указывает на компонент Home, который имеет следующую логику пользовательского интерфейса.

Теперь перейдите по URL-адресу порта 3000, и вы увидите, что прямо сейчас выполняется рендеринг Home компонента.

Это минимальный пример. Теперь давайте добавим еще один маршрут с теми же реквизитами, что и Home. Вызовите этот маршрут About с такой же логикой рендеринга, как Home.

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

Попробуйте посетить URL http://localhost:3000/about. Вы заметите, что оба компонента отображаются прямо сейчас на пути /about.

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

Этот exact также известен как квалификатор, который указывает, что путь должен точно соответствовать / и ничего после него, например /about. Теперь, если вы посетите окно браузера по URL-адресу http://localhost:3000/about, вы заметите, что на этот раз отображается только компонент about.

Что такое BrowserRouter?

Вы помните, что читали ранее о том, что react-router-dom используется только в случае веб-приложений? Итак, react-router-dom библиотека содержит два типа API маршрутизаторов для использования приложением React. Один называется BrowserRouter, который вы видели в действии в предыдущем разделе. Другой называется HashRouter.

BrowserRouter всегда будет прослушивать URL-адреса типа: http://localhost:3000/about, тогда как HashRouter будет иметь http://localhost:3000/#/about, как следует из названия, использует хэш # между ними. Так почему мы использовали BrowserRouter?

BrowserRouter - популярный выбор среди современных веб-приложений. Основная причина заключается в том, что он использует HTML5 History API для отслеживания истории маршрутизатора вашего приложения React. HashRouter имеет вариант использования для устаревших браузеров, где window.location.hash все еще используется для отслеживания маршрутов в SPA.

Упражнение «Сделай сам» 👇

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

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

Компонент Link

Для перехода между веб-страницами в HTML доступен тег привязки <a href=""></a>. Однако использование этого традиционного подхода приведет к обновлению браузера. Чтобы преодолеть это, React Router API предлагает компонент Link, который можно использовать для перехода к определенному URL-адресу или компоненту.

Давайте попробуем создать меню навигации с этими новыми знаниями. Импортируйте Link из react-router-dom в App.js файл. Вот измененный фрагмент App компонента.

Обратите внимание, что в приведенном выше фрагменте все ссылки добавляются перед всеми компонентами маршрута. Атрибуты стиля внутри style пока необязательны. Запустите сервер разработки и посетите окно браузера, и вы увидите всплывающее меню навигации вверху. Попробуйте нажимать ссылки для перехода между различными компонентами.

Везде, где Link отображается в проекте React, привязка <a> будет отображаться в HTML-коде приложения.

Активные ссылки с NavLink

В React Router API NavLink - это расширенная версия компонента Link. Можно сказать, что это особый тип Link, который может стилизовать себя так, чтобы представлять активное состояние при совпадении с текущим маршрутом.

Чтобы продемонстрировать это, давайте сначала заменим все теги Link на NavLink в App.js файле.

На этом этапе каждая NavLink ссылка будет вести себя как обычный Link компонент, что означает, что на данный момент изменений нет. Чтобы сделать ссылку активной, добавьте к ней опору activeClassName. Как показано ниже.

Чтобы настроить соответствующий CSS для работы, откройте файл App.css и добавьте его ниже.

Не забудьте импортировать этот файл внутрь App.js. Кроме того, измените маршрут about, чтобы получить activeClassName.

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

Попробуйте перейти к маршруту About и посмотрите, что произойдет.

При переходе к маршруту About вы заметили, что имя класса active также добавлено к соответствующему маршруту? Однако маршрут Home по-прежнему имеет активный класс, хотя URL-адрес совпадает с /about. Почему?

Принцип работы NavLink почти аналогичен работе компонента Route в React Router API. Чтобы убедиться, что только один маршрут имеет активное состояние класса, попробуйте изменить домашний маршрут в меню навигации, как показано ниже.

На этот раз вы получите желаемый результат.

Добавление параметров в маршруты

В этом разделе вы узнаете, как создавать динамические маршруты и управлять ими на основе параметра URL, такого как :id. Начнем с создания статического массива в App.js файле, который будет служить фиктивными данными.

Идея состоит в том, чтобы продемонстрировать маршрут как /posts, который отображает все сообщения, поступающие из массива. Однако каждое сообщение в массиве будет иметь id или уникальный идентификатор. Используя этот уникальный идентификатор, вы приблизитесь к концепции рендеринга динамического контента, написав логику для URL-адресов, например /posts/:id, где :id будет представлен конкретным id сообщения.

Для начала давайте добавим кучу фиктивных сообщений в состоянии внутри нового файла компонента с именем components/posts.js.

Соответствующие стили, указанные выше, для краткости добавлены в App.css файл.

Теперь импортируйте вновь созданный компонент внутрь App.js, где уже существуют другие маршруты.

В существующем меню навигации есть новый маршрут, который называется «Сообщения».

Откройте Posts.js, чтобы отобразить список сообщений и отображать их в виде списка всякий раз, когда текущее местоположение в веб-браузере совпадает с /posts.

Кроме того, компонент Child считывает все, что поступает из параметров URL, например, в приведенном выше случае id каждого сообщения. Объект match содержит информацию о том, как <Route path> соответствует URL-адресу, в нашем случае это идентификатор каждого сообщения.

Подключение поддержки Crowdbotics к вашему репозиторию Github

Как только все заработает, давайте теперь добавим версию git в этот проект React, а затем добавим поддержку платформы для создания приложений Crowdbotics. Откройте окно терминала и выполните:

Как только все файлы будут зафиксированы, добавьте этот репозиторий в свою учетную запись Github. Платформа для создания приложений Crowdbotics теперь дает вам возможность напрямую подключить репозиторий Github с помощью интеграции GitHub OAuth (что означает, что вам необходимо иметь учетную запись Crowdbotics или войти в нее, используя свою учетную запись Github).

Более подробную информацию об этом процессе можно найти здесь.

Заключение

Надеюсь, теперь вы знакомы с основными концепциями работы библиотеки React Router. Это мощная библиотека, которая помогает создавать лучшие приложения на React. Если вы хотите узнать больше о React Router, посетите его официальную документацию здесь.

Вы можете найти полное руководство в репозитории Github ниже.



amandeepmittal / response-router-v4-demo
React Router v4 Demo. Участвуйте в разработке amandeepmittal / response-router-v4-demo, создав учетную запись на GitHub. github.com