Понимание ReactJS Router с примером на стороне клиента
View more Tutorials:
1- Что такое React Router?
http://example.com/about ==> OK Work!
http://example.com/about#somthing ==> OK Work!
http://example.com/about/something ==> OK Work!
http://example.com/about/a/b ==> OK Work!
http://example.com/something/about ==> Not Work!
http://example.com/something/about#something ==> Not Work!
http://example.com/something/about/something ==> Not Work!
http://example.com#/about ==> OK Work!
http://example.com#/about/somthing ==> OK Work!
http://example.com/something ==> Not Work!
http://example.com/something#/about ==> Not Work!
http://example.com/about ==> OK Work!
http://example.com/about#somthing ==> OK Work!
http://example.com/about/something ==> Not Work!
http://example.com/about/a/b ==> Not Work!
http://example.com/something/about ==> Not Work!
http://example.com/something/about#something ==> Not Work!
http://example.com/something/about/something ==> Not Work!
.
exact path=»/about» component=
.
http://example.com#/about ==> OK Work!
http://example.com#/about/somthing ==> Not Work!
http://example.com/something ==> Not Work!
http://example.com/something#/about ==> Not Work!
2- React Router со стороны Client
View more Tutorials:
Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.
5.6 Маршрутизация
Здесь мы поговорим о такой важной составляющей любого серьезного веб-приложения, как маршрутизация. Пользователь должен видеть где он находится в данный момент времени в приложении, а также иметь возможность навигации по истории. Сам по себе React маршрутизацию не поддерживает, зато есть мощные библиотеки с целым арсеналом возможностей. Как раз одну из таких библиотек мы интегрируем в наш проект.
5.6.1 Для чего нужна маршрутизация?
Также должна работать история. То есть когда пользователь кликает на стрелку «Назад» в браузере, приложение должно направить нас на предыдущую страницу.
Сам по себе React не предоставляет такой возможности, это задача специальных библиотек. Как правило, используя API такой библиотеки мы подключаем компоненты страниц нашего положения, сопоставляя их с определёнными путями. После этого, переходя с одной страницы на другую мы будем видеть в адресной строке, как изменяется текущий путь.
5.6.2 Библиотека react-router
Эта библиотека популярна, довольна проста в использовании и обладает хорошей документацией. Она предоставляет такие возможности как:
Маршрутизация (компонент Route )
История (свойство history )
Это лишь малая часть того, что умеет библиотека. В нашем приложении мы будем использовать самые базовые вещи, чтобы у вас было общее представление о сути маршрутизации, о том как её подключать и использовать.
5.6.3 Добавление react-router в приложение
Для начала нам нужно добавить возможность работы с историей. Для этого есть специальная библиотека history:
Теперь подключим в наше приложение эту возможность, обновив файл index.js :
Все необходимые изменения сделаны, и теперь вы можете протестировать работу приложения, открыв его в отдельной вкладке:
Перейдя на новую вкладку вы увидите текущий путь в адресной строке:
Теперь попробуйте перейти на список приёмов и понаблюдайте за изменением текущего пути. Затем вернитесь назад, нажав на соответствующую кнопку в браузере. Сейчас вы видите маршрутизацию и историю в действии.
Простой туториал React Router v4
React Router v4 — это переработанный вариант популярного React дополнения. Зависимые от платформы конфигурации роутов из прошлой версии были удалены и теперь всё является простыми компонентами.
Этот туториал покрывает всё что вам нужно для создания веб-сайтов с React Router. Мы будем создавать сайт для локальной спортивной команды.
Хочешь посмотреть демку?
Установка
React Router v4 был разбит на 3 пакета:
react-router предоставляет базовые функции и компоненты для работы в двух окружениях(Браузере и react-native)
Router
При старте проекта вам нужно определить какой тип роутера использовать. Для браузерных проектов есть BrowserRouter и HashRouter компоненты. BrowserRouter — следует использовать когда вы обрабатываете на сервере динамические запросы, а HashRouter используйте когда у вас статический веб сайт.
История — History
Каждый Router создает объект history который хранит путь к текущему location[1] и перерисовывает интерфейс сайта когда происходят какие то изменения пути.
Остальные функции предоставляемые в React Router полагаются на доступность объекта history через context, поэтому они должны рендериться внутри компонента Router.
Заметка: Компоненты React Router не имеющие в качестве предка компонент Router не будут работать, так как не будет доступен context.
Рендеринг Router
Компонент Router ожидает только один элемент в качестве дочернего. Что бы работать в рамках этого условия, удобно создать компонент который рендерить всё ваше приложение(это так же важно для серверного рендеринга).
App компонент
Routes
компонент это главный строительный блок React Router’а. В том случае если вам нужно рендерить элемент в зависимости от pathname URL’ов, то следует использовать компонент
Path — путь
принимает path в виде prop который описывает определенный путь и сопоставляется с location.pathname.
В примере выше сопоставляет location.pathname который начинается с /roster[2]. Когда текущий location.pathname сопоставляется положительно с prop path то компонент будет отрендерен, а если мы не можем их сопоставить, то Route ничего не рендерит[3].
Заметка: Когда речь идет о пути React Router думает только о пути без домена. Это значит, что в адресе:
React Router будет видеть только /my-projects/one
Сопоставление пути
npm пакет path-to-regexp компилирует prop path в регулярное выражение и сопоставляет его против location.pathname. Строки path имеют более сложные опции форматирования чем объясняются здесь. Вы можете почитать документацию.
Когда пути сопоставляются создается объект match который содержит свойства:
Заметка: path в Route должен быть абсолютным[4].
Создание наших роутов
У нашего веб-сайта пути которые мы хотим сопоставлять такие:
Что делает рендер компонента Route?
У Route есть 3 props’a которые описывают каким образом выполнить рендер сопоставляя prop path с location.pathname и только один из prop должен быть представлен в Route:
В типичных ситуациях следует использовать component или render. Children prop может быть использован, но лучше ничего не делать если path не совпадает с location.pathname.
Сейчас мы опишем основную структуру роутера. Нам просто нужно отобразить наши маршруты. Для нашего приложения мы будем использовать компонент и компонент внутри нашего компонента который поместит сгенерированный HTML удовлетворяющий сопоставлению path внутри.
Унаследованные роуты
В компоненте Roster мы создадим компоненты для двух путей:
Может быть полезным группирование роутов которые имеют общие компоненты, что позволяет упростить родительские маршруты и позволяет отображать контент который относиться к нескольким роутам.
Параметры в path
будет использовать props.match.params для получения нужной информации которую следует отрендерить.
Заметка: Вы можете больше изучить о параметрах в путях в пакете path-to-regexp
Наряду с компонентом
Ссылки
Работающий пример
Весь код нашего веб сайта доступен по этому адресу на codepen.
Route готов!
Надеюсь теперь вы готовы погрузиться в изучение деталей маршрутизации веб приложений.
Пояснения
[1] — Объект location описывает разные части URL’a
[3] — Если вы используете prop children то route будет отрендерен даже если path и location.pathname не совпадают.
[6] — Компоненты и могут оба использовать prop location. Это позволяет сопоставлять их с path, который фактически отличается от текущего URL’а.
React Router
v6 is Here
Closing in on a decade of client-side routing, React Router v6 takes the best features from previous versions—and its sister project, Reach Router—in our smallest and most powerful package yet.
Used by dev teams at top companies
Nested Routes
Most apps have a series of nested layouts around the main sections of the page. These layouts are nearly always coupled to URL segments.
Every app has some root layout that is always rendering, that part is easy no matter what router you’re using.
But as segments are added to the URL, new layouts are added to the UI.
Sometimes it gets pretty deep, and you have to repeat these layout hierarchies across all routes in the app.
It’s not uncommon to have four levels of layouts!
With React Router, this is all built-in. Nested routes add both segments to the URL and layouts to the UI hierarchy. As the URL changes, your layouts automatically change with it.
Ranked Routes
Sometimes a URL like can match more than one route pattern. React Router ranks your routes and picks the best one.
Stay Connected
React Router is developed by the Remix team. To get updates and special content on React Router (as well as our other projects), subscribe to the Remix newsletter or join the conversation on Discord.
We respect your privacy, unsubscribe at any time.
React Router is built and maintained by Remix and hundreds of contributors.
Подробно о React Router. Часть 1 — основы роутинга, типы и динамические страницы
В этой серии статей вы подробно и доходчиво узнаете о том, как работает Router в React, как его можно использовать и другие интересные фишки этого функционала. Это первая часть из 3х, в ней будет рассказано об основах роутинга, типах и созданиях динамических страниц.
p.s статья описывает самый распространенную версию роутера на данный момент. 6я версия сейчас находится в альфе и имеет кардинально другой синтаксис.
React это широко используемая библиотека для client-side веб приложений. Сами знаете, в любом веб приложении будет по несколько страниц. Правильный роутинг ссылок и загрузка разных страниц в зависимости от параметров заданных маршрутов это главное требование для буквально любого приложения.
Существует отличный npm пакет, который берет на себя все сложности роутинга на React. Это react-router-dom — одна из самых используемых библиотек в react.
Простой роутинг
Давайте создадим две простые страницы.
И страницу About ( /about )
Создайте простое react приложение с использованием create-react-app CLI. Это очень просто сделать с помощью npx — npx create-react-app my-react-app
Давайте создадим две страницы. Ну или просто два функциональных компонента.
Перед тем как углубиться в код роутера. Давайте сначала поймем то, что же нам надо для роутинга страниц в нашем приложении.
Ссылки для навигации между страницами.
Нам нужно будет определить пути к страницам. Тут мы укажем путь URL и компонент, который нужно загружать с этим URL.
Ещё мы определим роутер, который будет проверять наличие запрашиваемого URL в указанных роутах.
А теперь дайте пройдем по каждой строчке отдельно.
Тут мы импортируем три компонента,
И Router в котором будет храниться вся логика нашего роутинга. Когда пользователь кликает на ссылку, этот компонент проверяет есть ли она в указанных роутах. Если да, то роутер сменит URL в браузере и роут отрендерит заданный компонент.
Зачем нам нужен Link, а не HTML анкор с href?
HTML тег a создает ссылку на сервер. Так что каждый раз, как пользователь кликает на роут, он не будет проверять наличие роутера в роуте. Вместо этого он просто редиректнет страницу в браузере на этот роут.
Если вы зайдете немного дальше и проверите работу наших роутов, то они будут работать. Но с небольшими тормозами.
Как точно попасть на нужный роут?
Этот prop поможет попасть на нужный роут только при полном совпадении, а если нет, то он просто не будет рендерить компонент.
Теперь оба компонента будут отлично рендериться и Link будет работать правильно.
Какие бывают роутеры
MemoryRouter
Это роутер, который не меняет URL в браузере, а оставляет изменения в памяти.
Он очень полезен для тестирования и вне браузерных сред разработки.
Но в браузере у него нет истории. Так что вы не сможете вернуться назад или вперед при помощи истории.
HashRouter
Это роутер, который использует client Side hash роутинг.
Всякий раз, когда рендерится новый роут, он обновляет URL в браузере с хешированными роутами. (/#/about)
Хэш часть ссылки не будет обработана сервером, сервер будет всегда отправлять index.html для каждого запроса и игнорировать хешированное значение, которое будет обработано уже React роутером.
Он используется для Legacy браузеров, которые обычно не поддерживают pushState API.
Ему не нужна конфигурация на сервере для обработки роутов.
Этот роут не рекомендован командой разработчиков которая создавала сам пакет react router. Используйте его только в том случае, если вам нужна поддержка Legacy браузеров или при осутствии серверной логики для обработки client Side роутов.
BrowserRouter
Он роутится как обычный URL в браузере, так что вы не сможете по ссылке отличить был ли это server Side рендеринг или же client side.
Он принимает forceRefresh пропсы для поддержки Legacy браузеров, которые не тянут HTML5 pushState API.
Динамические страницы в React Router
В начале статьи мы изучили то, как создавать простые статические страницы в роутере. Сейчас мы узнаем как создавать динамические ссылки в react роутере.
Мы создадим два роута,
Роут Users — статические роуты для отображения всех ссылок для отдельных пользователей.
Давайте создадим простой массив users с данными пользователей.
Давайте создадим новые роуты для всех пользователей и одного пользователя в нашем App.js файле.
Мы создали ссылку на страницу пользователей и также определили роут для страницы пользователей вместе с ассоциированным компонентом ( UsersPage ).
Итак, мы создали страницу пользователей с ссылками на них. Если вы кликните на ссылку, то она приведет вас на несуществующую страницу, потому что мы не создали роут каждому из пользователей.
Мы можем создать каждый отдельный роут как тут:
Конечно же нет! Я лгу вам, все мы знаем, что это не подходит для динамических страниц с большим количеством данных. Давайте посмотрим на то, как мы можем создать динамические роуты в React. Это очень и очень легко.
Давайте добавим этот код в наш пример.
Теперь наша страница пользователя работает. Но она не показывает никакую информацию непосредственно о самом пользователе. Давайте с этим разберемся.
Как получить доступ к параметрам роута в компоненте
Давайте посмотрим, какая информация находится в этих пропсах, выведя их через сам компонент.
И что же там внутри:
Давайте применим параметры в UserPage компоненте и покажем информацию о пользователе:
