Полное руководство по React Router v6. Часть 4 - Подробно о роутерах
2 года назад·3 мин. на чтение
В этой статье рассмотрим все виды роутеров из библиотеки React Router v6 - BrowserRouter, NativeRouter, HashRouter, HistoryRouter, MemoryRouter, StaticRouter.
В первой части мы говорили о настройке маршрутизатора и упоминали
Из первой части мы уже знакомы с
Этот роутер работает очень похоже на
Роутер
BrowserRouter
и NativeRouter
, но это не единственные типы роутеров. Всего существует 6 роутеров, и в этой части мы подробно рассмотрим каждый из них.
Серия статей о React Router v6 состоит из 4 частей.
- Основы React Router
- Продвинутые определения маршрутов
- Управление навигацией
- Подробно о роутерах (рассматривается в этой статье)
BrowserRouter
Из первой части мы уже знакомы с BrowserRouter
. Это роутер по умолчанию, который вы должны использовать, если вы работаете над веб-приложением, и это роутер, который вы будете использовать в 99% всех своих приложений, поскольку он охватывает все обычные варианты использования маршрутизации. Другие роутеры, о которых поговорим далее, имеют очень специфические варианты использования.
NativeRouter
NativeRouter
по сути является эквивалентом BrowserRouter
, но для React Native. Если вы используете React Native, то это роутер, который вы захотите использовать.
HashRouter
Этот роутер работает очень похоже на BrowserRouter
, но основное отличие заключается в том, что вместо того, чтобы изменять URL-адрес на что-то вроде http://localhost:3000/books
он будет хранить URL-адрес в хэше, как http://localhost:3000/#/books
. Как видите, этот URL-адрес имеет #
после URL-адреса, который представляет собой хэш-часть URL-адреса. Все, что находится в хэш-части URL-адреса, является просто дополнительной информацией, которая обычно обозначает идентификатор на странице для целей прокрутки, поскольку страница будет автоматически прокручиваться до элемента с идентификатором, представленным хешем, при загрузке страницы.
В React Router этот хэш на самом деле не используется для хранения идентификационной информации для прокрутки, а вместо этого он хранит информацию, связанную с текущим URL-адресом. Причина, по которой React Router делает это, заключается в том, что некоторые хостинг-провайдеры не позволяют вам фактически изменять URL-адрес вашей страницы. В этих очень редких случаях вы захотите использовать HashRouter
, поскольку HashRouter
не изменит фактический URL-адрес вашей страницы, а изменит только хэш вашей страницы. Если вы можете использовать какой-либо URL-адрес у своего хостинг-провайдера, то это не то, что вам следует использовать.
HistoryRouter
HistoryRouter
(в настоящее время называется unstable_HistoryRouter
) — это роутер, который позволяет вручную управлять объектом истории, который React Router использует для хранения всей информации, связанной с историей маршрутизации вашего приложения. Этот объект истории помогает убедиться, что такие вещи, как кнопки «Назад» и «Вперед» в браузере, работают правильно.
Это роутер, который вы, вероятно, никогда не должны использовать, если у вас нет очень конкретной причины, по которой вы хотите перезаписать или контролировать поведение истории по умолчанию React Router.
MemoryRouter
MemoryRouter
немного отличается от остальных роутеров, о которых мы говорили, поскольку вместо того, чтобы хранить информацию о текущем маршруте в URL-адресе браузера, этот роутер хранит информацию о роуте непосредственно в памяти. Очевидно, что это очень неподходящий роутер для обычных операций маршрутизации, но этот роутер невероятно полезен, когда вы пишете тесты для своего приложения, у которого нет доступа к браузеру.
Из-за того, как работает React Router, вам необходимо, чтобы ваши компоненты были упакованы в маршрутизатор, иначе весь ваш код маршрутизации будет выдавать ошибки и ломаться. Это означает, что даже если вы хотите протестировать один компонент, вам нужно будет обернуть этот компонент внутрь маршрутизатора, иначе он будет выдавать ошибки. Если вы тестируете свой код таким образом, что у него нет доступа к браузеру (например, модульное тестирование), то маршрутизаторы, о которых мы говорили до сих пор, будут выдавать ошибки, поскольку все они зависят от URL-адреса в браузере. MemoryRouter
, с другой стороны, хранит всю свою информацию в памяти, что означает, что он никогда не обращается к браузеру и идеально подходит при модульном тестировании компонентов. Однако, за исключением этого конкретного случая использования, этот маршрутизатор никогда не будет использоваться.
StaticRouter
Роутер StaticRouter
также имеет очень специфический вариант использования. Этот маршрутизатор специально предназначен для серверного рендеринга ваших приложений React, поскольку он принимает один проп location
и визуализирует ваше приложение, используя этот location
в качестве URL-адреса. Этот роутер на самом деле не может выполнять какую-либо маршрутизацию и будет просто отображать одну статическую страницу, но это идеально подходит для рендеринга на сервере, поскольку вы хотите просто отобразить HTML вашего приложения на сервере, а затем клиент может настроить всю вашу маршрутизацию и так далее.
<StaticRouter location="/books"> <App /> </StaticRouter>
Итоги
React Router — это огромная библиотека с множеством удивительных функций, поэтому она является популярной библиотекой для маршрутизации. Очень интересна реализация вложенных маршрутов, поскольку это значительно упрощает создание интуитивно понятных маршрутов.Полное руководство по React Router v6. Часть 3 - Управление навигацией
2 года назад·5 мин. на чтение
В этой статье рассмотрим, как перемещаться между роутами. Как добавить ссылки, как перейти по ссылке программно, как передать данные при переходе.
Серия статей о React Router v6 состоит из 4 частей.
Помимо пропса
Проп
Проп
Финальный проп называется
Компонент
Еще
Компонент
Компонент
Хук
Хук
- Основы React Router
- Продвинутые определения маршрутов
- Управление навигацией (рассматривается в этой статье)
- Подробно о роутерах
- Навигация по ссылкам
- Ручная навигация
- Передача данных при навигации
Навигация по ссылкам
Навигация по ссылкам - это самая простая и распространенная форма навигации. Мы уже видели самую простую форму навигации по ссылкам с помощью компонентаLink
.
Однако эти компоненты<Link to="/">Home</Link> <Link to="/books">Books</Link>
Link
могут стать немного сложнее. Например, у вас могут быть абсолютные ссылки, подобные приведенным выше ссылкам, или у вас могут быть ссылки, относящиеся к текущему отображаемому компоненту.
Например, представьте, что мы находимся в маршруте<Link to="/">Home</Link> <Link to="../">Back</Link> <Link to="edit">Edit</Link>
/books/3
с приведенными выше ссылками. Первая ссылка приведет к /
маршруту, так как это абсолютный маршрут. Любой маршрут, начинающийся с /
, является абсолютным маршрутом. Вторая ссылка приведет к маршруту /books
, так как это относительная ссылка, которая поднимается на один уровень вверх от /books/3
к /books
. Наконец, наша третья ссылка перейдет на страницу /books/3/edit
, так как она добавит путь к пропсу to
в конец текущей ссылки, поскольку это относительная ссылка.
to
, есть также 3 других пропса, которые важны для компонента Link
.
replace
Проп replace
имеет логическое значение, которое, если установить в true
, приведет к тому, что эта ссылка заменит текущую страницу в истории браузера. Представьте, что у вас есть следующая история браузера.
Если вы нажмете на ссылку, ведущую на страницу/ /books /books/3
/books/3/edit
, но у нее проп replace
имеет значение `trueё, ваша новая история будет выглядеть следующим образом.
Страница, на которой вы находились в данный момент, была заменена новой страницей. Это означает, что если вы нажмете кнопку «Назад» на новой странице, вы вернетесь на страницу/ /books /books/3/edit
/books
, а не на страницу /books/3
.
reloadDocument
Проп reloadDocument
также является логическим. Если задано значение true
, компонент Link
будет действовать как обычный тег <a>
и выполнять полное обновление страницы при навигации вместо того, чтобы просто повторно отображать содержимое внутри компонента Routes
.
state
Финальный проп называется state
. Этот проп позволяет передавать данные вместе с Link
, которая не отображается нигде в URL-адресе. Рассмотрим эту возможность более подробно, когда будем говорить о навигационных данных.
NavLink
Компонент NavLink
работает точно так же, как компонент Link
, но он предназначен специально для отображения активных состояний ссылок, например, в панелях навигации. По умолчанию, если проп to
у NavLink
совпадает с URL-адресом текущей страницы, к ссылке будет добавлен класс active
, который можно использовать для стилизации. Если этого недостаточно, можно передать функцию с параметром isActive
в className
, или в свойства style
, или в качестве дочерних элементов NavLink
.
<NavLink to="/" style={({ isActive }) => ({ color: isActive ? "red" : "black" })} > Home </NavLink>
NavLink
имеет проп end
, который используется для помощи во вложенной маршрутизации. Например, если мы находимся на странице /books/3
, это означает, что мы визуализируем компонент Book
, который вложен в наш маршрут /books
. Это означает, что если у нас есть NavLink
с to
установленным в /books
, он будет считаться активным. Это связано с тем, что NavLink
считается активным, если URL-адрес to
совпадает с пропсом to
NavLink
или если текущий Route
находится внутри родительского компонента c path
, который совпадает с пропсом to
компонента NavLink
. Если вы не хотите такое поведение по умолчанию, вы можете установить проп end
в true
, чтобы URL-адрес страницы точно соответствовал пропсу to
NavLink
.
Ручная навигация
Иногда нужно вручную перемещаться на основе таких вещей, как отправка формы или отсутствие доступа к определенной странице. Для таких случаев можно использовать либо компонентNavigate
, либо хук useNavigation
.
Компонент Navigate
Компонент Navigate
— это очень простой компонент, который при визуализации автоматически перенаправляет пользователя на значение пропса to
компонента.
Компонент<Navigate to="/" />
Navigate
имеет те же пропсы, что и компонент Link
, таким образом вы можете передать ему to
, replace
и state
.
Хук useNavigation
Хук useNavigation
представляет собой хук, который не принимает никаких параметров и возвращает одну функцию navigate
, которую вы можете использовать для перенаправления пользователя на определенные страницы. Эта функция navigate
принимает два параметра. Первый параметр — это местоположение to
, в которое вы хотите перенаправить пользователя, а второй параметр — это объект, который может иметь ключи для replace
и state
.
Приведенный выше код перенаправит пользователя на маршрутconst navigate = useNavigate() function onSubmit() { // Отправка значения формы navigate("/books", { replace: true, state: { bookName: "Fake Title" }}) }
/books
. Он также заменит текущий маршрут в истории и передаст некоторую информацию через state
.
Другой способ, которым вы можете использовать функцию navigate
, — передать ей число. Это позволит вам имитировать нажатие кнопки вперед/назад.
navigate(-1) // Перемещает назад на одну страницу в истории navigate(-3) // Перемещает назад на три страницу в истории navigate(1) // Перемещает вперед на одну страницу в истории
Передача данных при навигации
Наконец, пришло время поговорить о передаче данных между страницами. Существует 3 основных способа передачи данных между страницами.- Динамические параметры
- Параметры поиска
- Данные состояния/местоположения
Динамические параметры
Мы уже говорили о том, как использовать динамические параметры в URL-адресах с помощью хукаuseParams
. Это лучший способ обработки передаваемой информации, такой как идентификаторы.
Параметры поиска
Параметры поиска — это все параметры, которые идут после?
в URL-адресе (?name=Kyle&age=27
). Для работы с параметрами поиска необходимо использовать хук useSearchParams
, который работает очень похоже на useState
.
В этом примере у нас есть инпут, который по мере ввода будет обновлять поисковую часть нашего URL-адреса. Например, если наш ввод имеет значениеimport { useSearchParams } from "react-router-dom" export function SearchExample() { const [searchParams, setSearchParams] = useSearchParams({ n: 3 }) const number = searchParams.get("n") return ( <> <h1>{number}</h1> <input type="number" value={number} onChange={e => setSearchParams({ n: e.target.value })} /> </> ) }
32
, наш URL-адрес будет выглядеть так: http://localhost:3000?n=32
. Хук useSearchParams
принимает начальное значение, как useState
, и в нашем случае наше начальное значение n
равно 3
. Затем этот хук возвращает два значения. Первое значение - это все наши параметры поиска, а второе значение - это функция для обновления наших параметров поиска. Функция set
просто принимает один аргумент, который является новым значением параметров поиска. Однако первое значение, содержащее параметры поиска, немного более запутанно. Это связано с тем, что это значение относится к типу URLSearchParams
. Вот почему нам нужно использовать синтаксис .get
в строке 5 выше.
Данные состояния/местоположения
Вся эта информация в этом случае будет доступна через хукuseLocation
. Использовать этот хук очень просто, так как он возвращает одно значение и не принимает никаких параметров.
Если у нас есть следующий URLconst location = useLocation()
http://localhost/books?n=32#id
то возвращаемое значение useLocation
будет выглядеть следующим образом.
Этот объект местоположения содержит всю информацию, относящуюся к нашему URL-адресу. Он также содержит уникальный ключ, который можно использовать для кэширования, если вы хотите кэшировать информацию, когда пользователь нажимает кнопку «Назад», чтобы вернуться на страницу. Вы также заметите, что у нас есть проп{ pathname: "/books", search: "?n=32", hash: "#id", key: "2JH3G3S", state: null }
state
, возвращаемое из useLocation
. Эти данные состояния могут быть любыми и передаются между страницами без сохранения в URL-адресе. Например, если вы нажмете на Link
, которая выглядит следующим образом:
тогда значение состояния в объекте<Link to="/books" state={{ name: "Kyle" }}>
location
будет установлено в { name: "Kyle" }
.
Это может быть очень полезно, если, например, вы хотите отправлять простые сообщения между страницами, которые не должны храниться в URL-адресе. Хорошим примером этого может быть что-то вроде сообщения об успешном завершении, которое отправляется на страницу, на которую вы перенаправляетесь после создания новой книги.