Полное руководство по React Router v6. Часть 3 - Управление навигацией
год назад·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-адресе. Хорошим примером этого может быть что-то вроде сообщения об успешном завершении, которое отправляется на страницу, на которую вы перенаправляетесь после создания новой книги.Хуки useTransition и useDeferredValue в ReactJS 18
2 года назад·3 мин. на чтение
В React 18, релиз которого произошел в марте 2022, появилось много новых инструментов для написания производительных и отзывчивых приложений. Одним из заметных изменений является механизм рендеринга с новой ключевой концепцией: конкурентный рендеринг (concurrent rendering).
В этой статье повнимательнее рассмотрим два новых хука:
Какое обновление можно считать срочным, а какое обычным?
Хук
До React 18 все обновления состояния помечались как "срочные". Это означает, что все обновления состояния обрабатывались одинаково с одинаковым приоритетом.
С помощью
Когда использовать
Одним из примеров может быть список товаров с параметрами фильтрации.
Когда вы переключаете чекбоксы, чтобы выбрать размер или цвет одежды, вы ожидаете, что чекбоксы сразу же отобразят отмеченное или снятое состояние.
А сам список товаров, которые необходимо обновить согласно фильтрам, может быть отдельным и менее срочным обновлением.
Как использовать
Хук
Когда использовать
С помощью
Как использовать
useTransition()
и useDeferredValue()
.
Эти два хука дают возможность определять приоритет обновления состояния, или, скорее, указывать, является ли обновление менее важным, чем другие, и откладывать его в пользу более срочных.
- Срочные обновления: отражают прямое взаимодействие, такое как набор текста, клики, нажатия и т. д., т.е. то с чем взаимодействует пользователь. Когда вы вводите текст в поле ввода, вы хотите сразу увидеть введенный вами текст. В противном случае UI будет казаться медленным и подлагивать. Поэтому мы хотим сделать такие обновления приоритетным.
- Обычные обновления: переход пользовательского интерфейса из одного вида в другой. Пользователи знают, что представление должно измениться или обновиться (например, когда ожидается ответ на запрос данных). Даже если есть небольшая задержка, это можно рассматривать как ожидаемое поведение, и это не будет восприниматься как медлительность приложения.
Хук useTransition()
и функция startTransition()
До React 18 все обновления состояния помечались как "срочные". Это означает, что все обновления состояния обрабатывались одинаково с одинаковым приоритетом.
С помощью useTransition()
теперь можно пометить некоторые обновления состояния как несрочные.
Когда использовать useTransition()
?
Одним из примеров может быть список товаров с параметрами фильтрации.
Когда вы переключаете чекбоксы, чтобы выбрать размер или цвет одежды, вы ожидаете, что чекбоксы сразу же отобразят отмеченное или снятое состояние.
А сам список товаров, которые необходимо обновить согласно фильтрам, может быть отдельным и менее срочным обновлением.
Как использовать useTransition()
?
function App() { const [isPending, startTransition] = useTransition(); const [searchQuery, setSearchQuery] = useState(''); // запрос данных, который занимает некоторое время const filteredResults = getProducts(searchQuery); function handleQueryChange(event) { startTransition(() => { // оборачивая setSearchQuery() в startTransition(), // мы помечаем эти обновления как менее важные setSearchQuery(event.target.value); }); } return ( <div> <input type="text" onChange={handleQueryChange} /> {isPending && <span>Loading...</span>} <ProductsList results={filteredResults} /> </div> ); }
Хук useDeferredValue()
useDeferredValue()
очень похож на useTransition()
в том, что он позволяет отложить несрочное обновление состояния, но применяется его к части дерева.
Это похоже методы debounce и throttle, которые мы часто используем для отложенных обновлений. React будет работать с такими обновлениями, как только завершатся срочные обновления.
Когда использовать useDeferredValue()
?
С помощью useTransition()
вы сами решаете, когда конкретное обновление состояния может быть помечено как менее срочное. Но иногда такой возможности может и не быть, например, если фрагмент кода находится в сторонней библиотеке.
В таких случаях можно воспользоваться хуком useDeferredValue()
. С помощью useDeferredValue()
вы можете обернуть значение и пометить его изменения как менее важные и, следовательно, отложить повторный рендеринг.
useDeferredValue()
будет возвращать предыдущее значение до тех пор, пока есть более срочные обновления для завершения и отображения дерева с обновленным значением.
Как использовать useDeferredValue()
?
function ProductsList({ results }) { // deferredResults получат обновленные данные // когда завершатся срочные обновления const deferredResults = useDeferredValue(results); return ( <ul> {deferredResults.map((product) => ( <li key={product.id}>{product.title}</li> ))} </ul> ); }