React Router — это полнофункциональная клиентская и серверная библиотека маршрутизации для React, библиотеки JavaScript для создания пользовательских интерфейсов. React Router работает везде, где работает React; в Интернете, на сервере с node.js и в React Native.

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

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

В этом блоге мы коснемся некоторых основных концепций, связанных с React-Router:

  • Настройка маршрутов
  • Навигация по ссылке
  • Создание ссылок с активным стилем
  • Использование вложенных маршрутов для компоновки
  • Навигация программно
  • Использование параметров URL для загрузки данных
  • Использование параметров поиска URL
  • Маршрут «Без совпадений»

Монтаж

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

нпм

$ npm install react-router-dom@6

Пряжа

$ yarn add react-router-dom@6

Настройка маршрутов

После завершения установки мы переходим к настройке React-Router на верхнем уровне приложения. Просто импортируйте BrowserRouter, который затем свяжет наше приложение с URL-адресом браузера и отобразит его вокруг всего компонента приложения следующим образом:

Теперь давайте создадим пару новых файлов компонентов для страниц «О нас» и «Контакты». Затем мы добавим эти вновь созданные файлы в конфигурацию Routes, что позволит React Router узнать, какие файлы и по какому пути отображать.

Навигация по ссылке

Откройте файл Home .js и импортируйте Link из React-Router, чтобы добавить некоторую бизнес-логику навигации, которая позволит нам перемещаться по разным страницам в нашем приложении.

Теперь, когда мы нажимаем на ссылку О нас или Свяжитесь с нами, мы можем беспрепятственно перемещаться между всеми этими страницами.

Создание ссылок с активным стилем

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

Там мы сделали три вещи:

  1. Мы заменили Link на NavLink.
  2. Мы изменили style с простого объекта на функцию, которая возвращает объект.
  3. Мы изменили цвет нашей ссылки, взглянув на значение isActive, которое NavLink передало нашей функции оформления.

Вы можете сделать то же самое с className на NavLink:

// normal string
<NavLink className="red" />

// function
<NavLink className={({ isActive }) => isActive ? "red" : "blue"} />

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

Возможно, вы заметили, что при переходе по ссылкам макет внутри Home.js исчезает. Повторение общих макетов — это боль в шее. Мы узнали, что большая часть пользовательского интерфейса представляет собой серию вложенных макетов, которые почти всегда сопоставляются с сегментами URL-адреса, поэтому эта идея встроена прямо в React Router.

Давайте получим автоматическую, постоянную обработку макета, выполнив всего две вещи:

  1. Вложите маршруты внутрь маршрута приложения

Во-первых, давайте вложим маршруты. На данный момент маршруты О нас и Свяжитесь с нами являются родственными главной странице, мы хотим сделать их дочерними домашнего маршрута.

  1. Визуализировать розетку

Добавьте Outlet из React-Router внизу в Home.js, а затем, если мы щелкнем по нему, родительский маршрут (Home.js) сохранится, в то время как <Outlet> переключается между двумя дочерними маршрутами (<AboutUs> и <ContactUs>)

Навигация программно

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

Маршрут «Без совпадений»

Когда пользователь пытается перейти на любую страницу, которая не настроена в конфигурации маршрута, этот маршрут загрузит пустую пустую страницу. В React-Router мы можем справиться с этим сценарием, просто добавив «Маршрут» с путем «*», который имеет здесь особое значение и будет совпадать только тогда, когда другие маршруты не совпадают.

Использование параметров URL для загрузки данных

Давайте добавим маршрут для определенного товара. Мы только что посетили некоторые URL-адреса, такие как "/products/11", давайте создадим новый компонент в продуктах как productItem.js для отображения по этим URL-адресам:

export default function ProductItem() {
  return <h2>Product Item #???</h2>;
}

В идеале мы хотели бы отображать идентификатор товара вместо "???". Обычно в React вы бы передавали это как реквизит: <ProductItem id="11" />, но вы не контролируете эту информацию, потому что она исходит из URL-адреса.

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

Создайте новый <Route> внутри маршрута 'products' следующим образом:

Теперь давайте создадим файл Product.js и ProductItem.js и заметим пару вещей:

  • Мы только что создали маршрут, который соответствует таким URL-адресам, как «/products/11» и «/products/123». Часть :productItemId пути является «параметром URL», что означает, что он может соответствовать любому значению, если шаблон тот же.
  • <Route> добавляет второй уровень вложенности маршрутов, когда он соответствует: <App><Products><ProductItem /></Products></App>. Поскольку <Route> является вложенным, пользовательский интерфейс тоже будет вложенным.

Хорошо, теперь перейдите по ссылке на элемент продукта, обратите внимание, что URL-адрес изменился, но новый компонент элемента продукта еще не отображается. Ты знаешь почему?

Это верно! Нам нужно добавить выход к маршруту родительского макета.

Снова откройте компонент Product Item и давайте прочитаем параметр :productItemId из URL-адреса. Итак, короче.…..:invoiceId becomes params.invoiceId

Использование параметров поиска URL

Параметры поиска аналогичны параметрам URL-адреса, но они находятся в другой позиции в URL-адресе. Вместо того, чтобы быть в обычных сегментах URL, разделенных «/», они находятся в конце после ?. Вы видели их в Интернете, например, "/login?success=1" или "/shoes?brand=nike&sort=asc&sortby=price".

React Router упрощает чтение и управление параметрами поиска с помощью useSearchParams. Он работает во многом как aReact.useState(), но сохраняет и устанавливает состояние в параметрах поиска URL, а не в памяти.

import { useSearchParams } from "react-router-dom";
let [searchParams, setSearchParams] = useSearchParams();
//Get search value from URL
const value = searchParams.get("productId")
//Set search value to URL
setSearchParams({ productId });

Важные указатели

  • setSearchParams() помещают параметры поиска ?productId=... в URL-адрес и повторно отображают маршрутизатор.
  • useSearchParams теперь возвращает URLSearchParams с "productId" в качестве одного из своих значений.


GitHub — yuvraj24/React-Router-Tuts
Вы не можете выполнить это действие в данный момент. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или…github.com



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

Вы можете следить за мной в Twitter, Github, LinkedIn, Facebook.