Как реализовать одностраничное приложение с помощью React-Router

Узнайте, как использовать маршрутизатор React для разработки веб-сайта SPA

Что такое СПА?

SPA означает одностраничное приложение. В наши дни это очень распространенный способ программирования веб-сайтов. Идея состоит в том, что веб-сайт загружает весь HTML / JS при первом посещении. Когда вы затем будете перемещаться, браузер только повторно отобразит контент, не обновляя веб-сайт.

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

Мы рассмотрим, как мы можем использовать React-Router для его создания.

Развитие СПА

Сначала создайте шаблон приложения с помощью create-react-app.

create-react-app app

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

npm i react-router-dom --save

Мы начнем с изменения созданного приложения, откроем src/App.js и заменим все в нем следующим:

Обратите внимание, что мы возвращаем компонент Main? Давайте создадим его, чтобы приложение не вылетало. Создайте папку с именем Layouts и файл в ней с именем layouts/main.js. Этот файл будет содержать базовый макет приложения.

mkdir layouts
touch layouts/main.js

В main.js мы создадим панель навигации, которая выглядит очень плохо, но мы здесь, чтобы изучить React Router, а не CSS. Это будет иметь навигационные ссылки на страницу с информацией и на страницу контактов. Под навигационной панелью у нас будет блок содержимого, который будет использоваться для рендеринга выбранной ссылки. Это очень распространенная настройка SPA, где у вас есть статический макет с навигацией и карточкой, которая меняет содержимое. Вот код:

Давайте создадим панель навигации, а затем перейдем на страницу. Создайте в src папку под названием components, которая будет содержать компоненты приложения. Затем создайте components/navbar/navbar.js.

mkdir -p components/navbar/
touch components/navbar/navbar.js

Наконец, откройте src/index.css и вставьте следующий фрагмент CSS, чтобы вместо этого отобразить панель навигации в виде горизонтального списка:

Запустите приложение и посетите localhost: 3000, чтобы просмотреть получившееся приложение.

npm start

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

mkdir components/about
mkdir components/contact
mkdir components/home

Скопируйте и вставьте приведенный выше код для всех трех компонентов и измените имя на правильное. Таким образом, у вас должны быть components/about/About.js, components/contact/Contact.js и components/home/Home.js, которые выглядят как «О сущности», но с измененным названием.

Обучение использованию маршрутизатора React Router

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

Есть два файла, которые нам нужно изменить, чтобы эта работа работала: layouts/main.js необходимо обновить, чтобы включить маршрутизатор, а затем components/navbar/navbar.js необходимо заменить все <a> tags на Компонент с именем Link из маршрутизатора React. Мы рассмотрим все это шаг за шагом, чтобы можно было изучить каждый компонент.

Начните с добавления следующего импорта в main.js :

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

• Маршрутизатор - Маршрутизатор - это интерфейс, который необходимо выполнить для работы в качестве маршрутизатора. Доступно несколько различных маршрутизаторов по умолчанию. Мы начнем использовать HashRouter, но есть также обычный BrowserRouter. Вот отличное обсуждение разницы между ними в Stack Overflow.
• HashRouter - маршрутизатор Hash использует # в URL-адресе для синхронизации пользовательского интерфейса. Пример: http: // localhost: 3000 / # / about. Мы начнем использовать это, а позже научимся отключать.
• BrowserRouter - маршрутизатор, использующий API истории HTML5. Это роутер, который мы будем использовать.
• Switch - компонент, который позволяет нам контролировать рендеринг различных маршрутов. Он отобразит только первый соответствующий дочерний маршрут. Отлично подходит для того, чтобы избежать одновременного рендеринга нескольких маршрутов.
• Маршрут - компонент, который будет отображаться всякий раз, когда URL-адрес соответствует назначенному шаблону. Это означает, что у нас может одновременно отображаться несколько маршрутов, поэтому Switch важен.
• NavLink / Link - ссылки - это компонент, который позволяет маршрутизатору изменять навигацию в вашем приложении. NavLink - это просто расширение Link, которое позволяет стилизовать. Я предпочитаю использовать NavLink, потому что он добавляет класс .activate к текущей выбранной ссылке на панели навигации. Это позволяет нам легко показать, какая ссылка выбрана в данный момент.

Мы добавим HashRouter вокруг всего содержимого внутри main.js. Это необходимо для правильного использования компонентов внутри. Если компонент Route будет вне HashRouter, он не будет работать. Поэтому мы должны сделать HashRouter родительским. По этой причине маршрутизаторы часто встречаются в App.js.

Подсказка: мы удалим HashRouter и будем использовать BrowserRouter позже.

Switch будет помещен в div Content, поскольку именно в этом div Content мы хотим отобразить выбранную страницу. Помните, что всякий раз, когда Route совпадает с URL-адресом, он будет отображать, и переключатель гарантирует, что отображается только первое совпадение.

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

Затем нам нужно изменить Navbar.js, чтобы использовать специальный компонент NavLink вместо <a>. Это связано с тем, что маршрутизатор будет работать только в том случае, если мы будем использовать компоненты Link.

Обратите внимание, как в пути «/» есть точное ключевое слово? Это связано с тем, что URL-адрес «/» по умолчанию будет соответствовать ВСЕМ путям, поскольку все они содержат «/». И помните, какую ссылку выберет переключатель? Первое совпадение, поэтому мы должны сказать, что выбирайте «/» только в том случае, если это точное совпадение. Код выглядит следующим образом:

При желании вы можете изменить активный CSS в index.css, чтобы выделить выбранную ссылку.

Посетите localhost: 3000, чтобы увидеть результат и попробовать навигацию. Вы должны увидеть, что верхняя панель навигации остается на месте, пока содержимое переключается.

Передача данных по ссылке (UseParams и UseLocation)

Одна из ключевых особенностей ссылок заключается в том, что мы можем передавать данные в компоненты. Это может быть важно при настройке профиля пользователя и т. Д.

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

Первый способ - использовать хук useParams от реактивного маршрутизатора. Это ловушка, которая позволяет передавать пары ключ-значение в URL. Давайте добавим профиль пользователя и напечатаем имя пользователя для демонстрации.

Сначала создайте новую папку с именем user и файл в ней с именем components/user/profile.js.

mkdir components/user
touch components/user/profile.js

В profile.js нам нужно импортировать хук useParams. Затем мы присвоим значение имени пользователя, используя этот хук. Вот код:

Как useParams узнать, какое значение извлечь? Использование именованных параметров в объявлении маршрута. Поэтому нам нужно изменить Маршрут в main.js, чтобы включить его в URL. Параметры именуются добавлением :parameter к маршруту. Итак, мы хотим добавить :username.

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

Снова зайдите на сайт и посмотрите результаты. Обратите внимание, как URL-адрес показывает значение имени пользователя. Попробуйте изменить URL-адрес в браузере, чтобы изменения вступили в силу.

Передача данных через React Router (useLocation)

Как вы могли догадаться, использование параметров URL не позволяет нам легко добавлять многие параметры. Он позволяет передавать только строки, и вы, вероятно, захотите передать больше данных.

К счастью, это также возможно, используя state в ссылках. Каждая ссылка может иметь объект accept с параметром to, который может передаваться с использованием состояния. Состояние можно передать с помощью хука useLocation.

Для объекта to object должно быть установлено состояние и переменная имени пути, имя пути - это конечная точка URL, которую нужно использовать.

{
"pathname": "url",
"state": {
    "yourstatevar": "value"
  }
}

Теперь вы думаете: «Отлично, пора его использовать». Однако на Stack Overflow и других форумах есть несколько очень распространенных вопросов, которые возникают из-за следующих вещей, которые мы рассмотрим.

«Да, я сделал эти ошибки намеренно, чтобы мы могли их исправить».

- Злой учитель программирования

Это проблемы:

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

Во-первых, HashRouter не поддерживает ловушку useLocation. Это важно знать, и это также очень подчеркнуто в документации. Итак, мы переключимся с HashRouter на BrowserRouter. Единственное изменение, которое нам нужно сделать, это изменить используемое имя и обязательно импортировать его.

И пока мы меняем название, нам нужно решить проблему номер два. Мы просто переместим Маршрутизатор в файл index.js. Это заставит компонент Router обернуть приложение и, таким образом, не сделать его частью того же компонента. Вот код:

Далее мы удалим роутер из main.js.

Затем нам нужно обновить navbar.js, чтобы объект TO передавал больше данных. Код ниже:

И наконец, нам нужно использовать хук useLocation. В этом примере я покажу вам, как назначить и переменную состояния, и имя пути. Использование такое же, как и в случае с крючком useParams.

Посетите localhost: 3000 и посмотрите результат. Не забудьте отметить, что URL-адреса изменились с тех пор, как мы удалили HashRouter.

Программно маршрутизировать с помощью useHistory

Иногда вам может понадобиться программно перенаправить пользователя на основе какого-либо события. Это можно сделать с помощью ловушки useHistory, которая вернет объект истории, который мы можем использовать для перенаправления браузера. Пользоваться им просто. Когда вы используете объект истории и используете push(route), он изменяет навигацию в браузере.

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

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

Попробуйте снова зайти на localhost: 3000. Перейдите к чему-нибудь, кроме страницы /, а затем нажмите кнопку. Вуаля, он должен был вернуть вас обратно!

Заключение

Вы дошли до конца этой статьи. Надеюсь, вы сочли это полезным.
Вы можете найти полный код, использованный в статье, на GitHub.

Сегодня мы рассмотрели следующие темы:

• Как настроить и использовать React Router
• Расположение маршрутизатора
• Использование Switch для маршрутизации между множеством ссылок
• Ссылка на подстраницу в подкомпоненте
• Передача данных с помощью хуков useParams и useLocation
• Программное изменение маршрута с помощью хука useHistory

Спасибо за прочтение. А теперь иди и проложи маршрут по миру.