Разработка сайтов в Славянске, ДНР. React Router v5: полное руководство

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

В этом руководстве вы познакомитесь с React Router v5 и со многими вещами, которые вы можете с ним делать.

Вступление

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

Каждое представление должно иметь URL-адрес, однозначно определяющий это представление. Это делается для того, чтобы пользователь мог добавить URL-адрес в закладки для справки в более позднее время. Например, www.example.com/products.

Кнопки браузера «назад» и «вперед» должны работать должным образом.

Динамически генерируемые вложенные представления также должны иметь собственный URL-адрес, например example.com/products/shoes/101, где 101 — это идентификатор продукта.

Маршрутизация — это процесс синхронизации URL-адреса браузера с тем, что отображается на странице. React Router позволяет декларативно управлять маршрутизацией. Декларативный подход к маршрутизации позволяет вам контролировать поток данных в вашем приложении, говоря, что «маршрут должен выглядеть так»:

 

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

Примечание. Существует распространенное заблуждение, что React Router — это официальное решение для маршрутизации, разработанное Facebook. На самом деле это сторонняя библиотека, широко популярная благодаря своему дизайну и простоте.

Обзор

Этот учебник разделен на различные разделы. Во-первых, мы настроим React и React Router с помощью npm. Затем мы перейдем к некоторым основам React Router. Вы найдете различные демонстрации кода React Router в действии. Примеры, рассмотренные в этом руководстве, включают:

базовая навигационная маршрутизация

вложенная маршрутизация

вложенная маршрутизация с параметрами пути

защищенная маршрутизация

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

Весь код проекта доступен в этом репозитории GitHub.

Давайте начнем!

Настройка React-маршрутизатора

Чтобы следовать этому руководству, вам понадобится последняя версия Node, установленная на вашем ПК. Если это не так, перейдите на домашнюю страницу Node и загрузите правильные двоичные файлы для вашей системы. В качестве альтернативы вы можете рассмотреть возможность использования диспетчера версий для установки Node. У нас есть туториал по использованию менеджера версий.

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

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

node -v

> 12.19.0

npm -v

> 6.14.8

Сделав это, давайте начнем с создания нового проекта React с помощью инструмента Create React App. Вы можете либо установить это глобально, либо использовать npx, например:

npx create-react-appreact-router-demo

Когда это закончится, перейдите во вновь созданный каталог:

cd react-router-demo

Библиотека React Router состоит из трех пакетов: react-router, react-router-dom и react-router-native. Основной пакет для маршрутизатора — react-router, тогда как два других зависят от среды. Вы должны использовать react-router-dom, если вы создаете веб-сайт, и react-router-nativeесли вы находитесь в среде разработки мобильных приложений, используя React Native.

Используйте npm для установки react-router-dom:

npm install react-router-dom

Затем запустите сервер разработки следующим образом:

npm run start

Поздравляем! Теперь у вас есть работающее приложение React с установленным React Router. Вы можете просмотреть работающее приложение по адресу http: //localhost:3000/.

Основы маршрутизатора React

Теперь давайте ознакомимся с базовой настройкой React Router. Для этого мы создадим приложение с тремя отдельными представлениями: «Главная», «Категория» и «Продукты».

Компонент Router_

Первое, что нам нужно сделать, это обернуть наш компонент в компонент (предоставленный React Router). Поскольку мы создаем браузерное приложение, мы можем использовать два типа маршрутизатора из React Router API:

БраузерРоутер

HashRouter

Основное различие между ними очевидно в URL-адресах, которые они создают:

//

http://example.com/about

//

http://example.com/#/about

Он более популярен из двух, потому что он использует API истории HTML5 для синхронизации вашего пользовательского интерфейса с URL-адресом, тогда как использует хэш-частьURL-адреса (window.location.hash). Если вам нужно поддерживать устаревшие браузеры, которые не поддерживают History API, вам следует использовать . В противном случае это лучший выбор для большинства случаев использования. Подробнее об отличиях можно прочитать здесь.

Итак, давайте импортируем BrowserRouterкомпонент и обернем его вокруг Appкомпонента:

// src/index.js

import React from «react»;

import ReactDOM from «react-dom»;

import App from «. /App»;

import { BrowserRouter } from «react-router-dom»;

ReactDOM.render (

,

document.getElementById («root»)

) ;

Приведенный выше код создает historyэкземпляр для всего нашего компонента. Давайте посмотрим, что это значит.

Немного истории

Библиотека historyпозволяет легко управлять историей сеансов везде, где запущен JavaScript. Объект historyабстрагируется от различий в различных средах и предоставляет минимальный API, который позволяет вам управлять стеком истории, перемещаться и сохранять состояние между сеансами. — Документы по обучению React

Каждый компонент создает historyобъект, который отслеживает текущее местоположение (history.location), а также предыдущие местоположения в стеке. Когда текущее местоположение изменяется, представление перерисовывается, и вы получаете ощущение навигации. Как меняется текущее местоположение? У объекта истории есть такие методы, как history.pushи history.replace, чтобы позаботиться об этом. Метод history.pushвызывается, когда вы щелкаете компонент, и history.replaceвызывается, когда вы используете файл . Другие методы, такие как history.goBackи history.goForward, используются для навигации по стеку истории путем перехода назад или вперед по странице.

Двигаясь дальше, у нас есть ссылки и маршруты.

Linkи Routeкомпоненты

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

Компонент

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

для перехода к определенному URL-адресу и повторной визуализации представления без обновления.

Теперь мы рассмотрели все, что вам нужно, чтобы наше приложение работало. Обновить src/App.jsследующим образом:

import React from «react»;

import { Link, Route, Switch } from «react-router-dom»;

const Home = () => (

 

 

) ;

const Category = () => (

 

 

) ;

const Products = () => (

 

 

) ;

export default function App () {

return (

 

 

) ;

}

Здесь мы объявили компоненты для Homeи Categoryвнутри Products. App.jsХотя пока это нормально, когда компонент начинает расти, лучше иметь отдельный файл для каждого компонента. Как правило, я создаю новый файл для компонента, если он занимает более 10 строк кода. Начиная со второй демонстрации, я буду создавать отдельный файл для компонентов, которые стали слишком большими, чтобы поместиться в App.jsфайле.

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

Здесь /соответствует и, /и /category. Таким образом, оба маршрута сопоставляются и отображаются. Как этого избежать? Вы должны передать exactреквизит with path='/':

 

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

Вложенная маршрутизация

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

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

component: когда URL-адрес совпадает, маршрутизатор создает элемент React из данного компонента, используя React.createElement.

render: удобно для встроенного рендеринга. Свойство renderожидает функцию, которая возвращает элемент, когда местоположение соответствует пути маршрута.

children: это похоже на render, поскольку ожидает функцию, которая возвращает компонент React. Однако childrenотображается независимо от того, совпадает ли путь с местоположением или нет.

Путь и совпадение

Свойство pathиспользуется для определения части URL-адреса, которой должен соответствовать маршрутизатор. Он использует библиотеку Path-to-RegExp для преобразования строки пути в регулярное выражение. Затем он будет сопоставлен с текущим местоположением.

Если путь маршрутизатора и местоположение успешно совпадают, создается объект, который называется объектом сопоставления. Объект matchсодержит дополнительную информацию об URL-адресе и пути. Эта информация доступна через его свойства, перечисленные ниже:

match.url: строка, которая возвращает совпавшую часть URL-адреса. Это особенно полезно для создания вложенных

компонентов.

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

match.isExact: логическое значение, возвращающее true, если совпадение было точным (без завершающих символов).

match.params: объект, содержащий пары ключ/значение из URL-адреса, проанализированного пакетом Path-to-RegExp.

Неявная передача реквизита

Обратите внимание, что при использовании реквизита для componentрендеринга маршрута реквизиты matchи маршрут неявно передаются компоненту. При использовании нового шаблона рендеринга маршрута это не так.locationhistory

Например, возьмем этот компонент:

const Home = (props) => {

console.log (props) ;

return (

 

 

) ;

};

Теперь визуализируйте маршрут следующим образом:

Это зарегистрирует следующее:

{

history: {... }

location: {... }

match: {... }

}

Но теперь вместо этого визуализируйте маршрут следующим образом:

Это зарегистрирует следующее:

{}

Сначала это может показаться невыгодным, но не волнуйтесь! React v5.1 представил несколько хуков, которые помогут вам получить доступ к тому, что вам нужно, где вам это нужно. Эти хуки дают нам новые способы управления состоянием нашего маршрутизатора и помогают привести в порядок наши компоненты.

Я буду использовать некоторые из этих хуков в этом руководстве, но если вы хотите получить более подробную информацию, ознакомьтесь с объявлением о выпуске React Router v5.1. Также обратите внимание, что хуки были представлены в версии 16.8 React, поэтому для их использования вам потребуется как минимум эта версия.

Компонент Switch_

Прежде чем мы перейдем к демонстрационному коду, я хочу познакомить вас с компонентом Switch. Когда несколько s используются вместе, все совпадающие маршруты отображаются включительно. Рассмотрим этот код из демонстрации 1. Я добавил новый маршрут, чтобы продемонстрировать, почему он полезен:

This text will render for any route other than '/'

 

Если URL-адрес равен, отображаются /productsвсе маршруты, соответствующие местоположению. /productsТаким образом, путь with /: idотображается вместе с компонентом. Это по дизайну. Однако, если это не то поведение, которое вы ожидаете, вы должны добавить компонент в свои маршруты. При использовании рендерится только первый дочерний элемент, соответствующий местоположению:

This text will render for any route other than those defined above

 

 

Часть: idиспользуется pathдля динамической маршрутизации. Он будет соответствовать чему-либо после косой черты и сделает это значение доступным в компоненте. Мы увидим пример этого в работе в следующем разделе.

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

Динамическая вложенная маршрутизация

Ранее мы создали маршруты для /, /categoryи /products. Но что, если нам нужен URL-адрес в виде /category/shoes?

Начнем с обновления src/App.jsследующим образом:

import React from «react»;

import { Link, Route, Switch } from «react-router-dom»;

import Category from «. /Category»;

const Home = () => (

 

 

) ;

const Products = () => (

 

 

) ;

export default function App () {

return (

 

 

) ;

}

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

Создадим Category.jsсейчас:

// src/Category.js

import React from «react»;

import { Link, Route, useParams, useRouteMatch } from «react-router-dom»;

const Item = () => {

const { name } = useParams () ;

return (

 

 

) ;

}

const Category = () => {

const { url, path } = useRouteMatch () ;

return (

 

 

) ;

};

export default Category;

Здесь мы используем хук useRouteMatch для получения доступа к matchобъекту. Как упоминалось ранее, match.urlбудет использоваться для построения вложенных ссылок и match.pathдля вложенных маршрутов. Если у вас возникли проблемы с пониманием концепции соответствия, console.log (useRouteMatch ())предоставьте некоторую полезную информацию, которая может помочь прояснить ее.

<Route path={`${path}/: name`}>

 

Это наша первая правильная попытка динамической маршрутизации. Вместо жесткого кодирования маршрутов мы использовали переменную в pathсвойстве.: nameявляется параметром пути и перехватывает все после category/, пока не встретится еще одна косая черта. Таким образом, имя пути, например products/running-shoes, создаст paramsобъект следующим образом:

{

name: «running-shoes»;

}

Чтобы получить доступ к этому значению внутри компонента, мы используем хук useParams, который возвращает объект пар ключ/значение параметров URL.

Попробуйте это в своем браузере. Раздел «Категория» теперь должен иметь три подраздела, каждый со своим маршрутом.

Вложенная маршрутизация с параметрами пути

Давайте еще немного усложним, ладно? Реальному маршрутизатору придется обрабатывать данные и отображать их динамически. Предположим, у нас есть некоторые данные о продукте, возвращаемые API в следующем формате:

const productData = [

{

id: 1,

name: «NIKE Liteforce Blue Sneakers»,

description:

«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.»,

status: «Available»,

},

{

id: 2,

name: «Stylised Flip Flops and Slippers»,

description:

«Mauris finibus, massa eu tempor volutpat, magna dolor euismod dolor.»,

status: «Out of Stock»,

},

{

id: 3,

name: «ADIDAS Adispree Running Shoes»,

description:

«Maecenas condimentum porttitor auctor. Maecenas viverra fringilla felis, eu pretium.»,

status: «Available»,

},

{

id: 4,

name: «ADIDAS Mid Sneakers»,

description:

«Ut hendrerit venenatis lacus, vel lacinia ipsum fermentum vel. Cras.»,

status: «Out of Stock»,

},

];

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

/products: это должно отображать список продуктов.

/products/: productId: если продукт с: productIdсуществует, он должен отображать данные о продукте, а если нет, он должен отображать сообщение об ошибке.

Создайте новый файл src/Products.jsи добавьте следующее (обязательно скопируйте данные о продукте сверху):

import React from «react»;

import { Link, Route, useRouteMatch } from «react-router-dom»;

import Product from «. /Product»;

const Products = ({ match }) => {

const productData = [... ];

const { url } = useRouteMatch () ;

/* Create an array of `

• ` items for each product */

  const linkList = productData.map ((product) => {

  return (

   

•  

  <Link to={`${url}/${product.id}`}>{product.name}

) ;

}) ;

return (

 

 

) ;

};

export default Products;

Во-первых, мы используем useRouteMatchхук, чтобы получить URL-адрес от matchобъекта. Затем мы создаем список компонентов, используя idсвойство каждого из наших продуктов, которое мы сохраняем в linkListпеременной.

Первый маршрут использует переменную в pathсвойстве, которая соответствует идентификатору продукта. Когда он совпадает, мы визуализируем компонент (который мы определим через минуту), передавая ему данные о нашем продукте:

<Route path={`${url}/: productId`}>

 

У второго маршрута есть exactподдержка, поэтому он будет отображаться только тогда, когда URL-адрес /productsи ничего не выбрано.

Теперь вот код компонента. Вам нужно будет создать этот файл по адресу src/Product.js:

import React from «react»;

import { useParams } from «react-router-dom»;

const Product = ({ data }) => {

const { productId } = useParams () ;

const product = data.find (p => p.id === Number (productId));

let productData;

if (product) {

productData = (

 

 

) ;

} else {

productData =

Sorry. Product doesn’t exist

;

}

return (

 

 

) ;

};

export default Product;

Метод findиспользуется для поиска в массиве объекта со свойством ID, равным match.params.productId. Если продукт существует, productDataотображается. Если нет, отображается сообщение «Продукт не существует».

Наконец, обновите свой компонент следующим образом:

import React from «react»;

import { Link, Route, Switch } from «react-router-dom»;

import Category from «. /Category»;

import Products from «. /Products»;

const Home = () => (

 

 

) ;

export default function App () {

return (

 

 

) ;

}

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

Поиграйте с демо. Убедитесь, что все работает и что вы понимаете, что происходит в коде.

Защита маршрутов

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

Тем не менее, есть несколько аспектов React Router, которые нам нужно осветить в первую очередь.

Компонент Redirect_

Как и в случае перенаправления на стороне сервера, компонент перенаправления React Router заменит текущее местоположение в стеке истории новым местоположением. Новое местоположение определяется toсвойством. Вот как мы будем использовать :

<Redirect to={{pathname: '/login’, state: { from: location }}}

Таким образом, если кто-то попытается получить доступ к /adminмаршруту, не выходя из системы, он будет перенаправлен на /loginмаршрут. Информация о текущем местоположении передается через stateреквизит, поэтому, если аутентификация прошла успешно, пользователь может быть перенаправлен обратно на страницу, к которой он изначально пытался получить доступ.

Пользовательские маршруты

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

Создайте новый файл PrivateRoute.jsв srcкаталоге и добавьте следующее содержимое:

import React from «react»;

import { Redirect, Route, useLocation } from «react-router-dom»;

import { fakeAuth } from '. /Login’;

const PrivateRoute = ({ component: Component,...rest }) => {

const location = useLocation () ;

return (

{fakeAuth.isAuthenticated === true?

:

}

 

) ;

};

export default PrivateRoute;

Как вы можете видеть, в определении функции мы деструктурируем получаемые реквизиты на Componentреквизит и restреквизит. Свойство Componentбудет содержать любой компонент, который мы защищаем (в нашем случае Admin). Опора restбудет содержать любые другие реквизиты, которые мы передали.

Затем мы возвращаем компонент, который отображает либо защищенный компонент, либо перенаправляет нас на наш /loginмаршрут, в зависимости от того, вошел ли пользователь в систему. Здесь это определяется fakeAuth.isAuthenticatedсвойством, которое импортируется из компонента.

Преимущество этого подхода в том, что он явно более декларативен и может использоваться повторно.

Важное уведомление о безопасности

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

Аутентификация в приложении React достойна отдельного руководства, но одним из способов ее реализации будет использование веб-токенов JSON. Например, у вас может быть конечная точка на вашем сервере, которая принимает комбинацию имени пользователя и пароля. Когда он получает их (через Ajax), он проверяет, действительны ли учетные данные. Если это так, он отвечает JWT, который приложение React сохраняет (например, в sessionStorage), а если нет, то отправляет 401 Unauthorizedответ обратно клиенту.

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

При хранении паролей сервер не будет хранить их в открытом виде. Скорее, он зашифровал бы их — например, с помощью bcryptjs.

Реализация защищенного маршрута

Теперь давайте реализуем наш защищенный маршрут. Измените src/App.jsтак:

import React from «react»;

import { Link, Route, Switch } from «react-router-dom»;

import Category from «. /Category»;

import Products from «. /Products»;

import Login from '. /Login’;

import PrivateRoute from «. /PrivateRoute»;

const Home = () => (

 

 

) ;

const Admin = () => (

 

 

) ;

export default function App () {

return (

 

 

) ;

}

Как видите, мы добавили компонент в начало файла и включаем наш компонент. Как упоминалось ранее, этот настраиваемый маршрут отображает компонент, если пользователь вошел в систему. В противном случае пользователь перенаправляется на. /login

Наконец, вот код компонента Login:

import React, { useState } from «react»;

import { Redirect, useLocation } from «react-router-dom»;

export default function Login () {

const { state } = useLocation () ;

const { from } = state || { from: { pathname: «/» } };

const [redirectToReferrer, setRedirectToReferrer] = useState (false) ;

const login = () => {

fakeAuth.authenticate (() => {

setRedirectToReferrer (true) ;

}) ;

};

if (redirectToReferrer) {

return ;

}

return (

 

 

) ;

}

/* A fake authentication function */

export const fakeAuth = {

isAuthenticated: false,

authenticate (cb) {

this.isAuthenticated = true;

setTimeout (cb, 100) ;

}

};

К настоящему времени, надеюсь, здесь не происходит ничего слишком сложного. Мы используем хук useLocation для доступа к locationреквизиту маршрутизатора, из которого мы получаем stateсвойство. Затем мы используем деструктурирование объекта, чтобы получить значение для URL-адреса, к которому пользователь пытался получить доступ, прежде чем его попросят войти в систему. Если этого нет, мы устанавливаем для него значение { pathname: «/» }.

Затем мы используем хук React useStateдля инициализации redirectToReferrerсвойства в false. В зависимости от значения этого свойства пользователь либо перенаправляется туда, куда он направлялся (т. е. пользователь вошел в систему), либо ему предоставляется кнопка для входа в систему.

После нажатия кнопки выполняется fakeAuth.authenticateметод, который устанавливает fakeAuth.isAuthenticatedи true (в функции обратного вызова) обновляет значение redirectToReferrerдо true. Это приводит к повторному рендерингу компонента и перенаправлению пользователя.

Рабочая демонстрация

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

Резюме

Как вы видели в этой статье, React Router — это мощная библиотека, дополняющая React для создания лучших декларативных маршрутов. В отличие от предыдущих версий React Router, в версии 5 все — «просто компоненты». Более того, новый шаблон дизайна идеально вписывается в способ ведения дел React.

В этом уроке мы узнали:

как настроить и установить React Router

основы маршрутизации и некоторые важные компоненты, такие как и

как создать минимальный роутер для навигации и вложенных маршрутов

как строить динамические маршруты с параметрами пути

как работать с хуками React Router и его новым шаблоном рендеринга маршрутов

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