Полное руководство по React Router v6. Часть 3 - Управление навигацией

Серия статей о React Router v6 состоит из 4 частей.

1. Основы React Router
2. Продвинутые определения маршрутов
3. Управление навигацией (рассматривается в этой статье)
4. Подробно о роутерах

В этой статье рассмотрим следующие темы.

1. Навигация по ссылкам
2. Ручная навигация
3. Передача данных при навигации

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

Навигация по ссылкам - это самая простая и распространенная форма навигации. Мы уже видели самую простую форму навигации по ссылкам с помощью компонента 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 основных способа передачи данных между страницами.

1. Динамические параметры
2. Параметры поиска
3. Данные состояния/местоположения

Динамические параметры

Мы уже говорили о том, как использовать динамические параметры в URL-адресах с помощью хука useParams. Это лучший способ обработки передаваемой информации, такой как идентификаторы.

Параметры поиска

Параметры поиска — это все параметры, которые идут после ? в URL-адресе (?name=Kyle&age=27). Для работы с параметрами поиска необходимо использовать хук useSearchParams, который работает очень похоже на useState.

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 })}
      />
    </>
  )
}

В этом примере у нас есть инпут, который по мере ввода будет обновлять поисковую часть нашего URL-адреса. Например, если наш ввод имеет значение 32, наш URL-адрес будет выглядеть так: http://localhost:3000?n=32. Хук useSearchParams принимает начальное значение, как useState, и в нашем случае наше начальное значение n равно 3. Затем этот хук возвращает два значения. Первое значение - это все наши параметры поиска, а второе значение - это функция для обновления наших параметров поиска. Функция set просто принимает один аргумент, который является новым значением параметров поиска. Однако первое значение, содержащее параметры поиска, немного более запутанно. Это связано с тем, что это значение относится к типу URLSearchParams. Вот почему нам нужно использовать синтаксис .get в строке 5 выше.

Данные состояния/местоположения

Вся эта информация в этом случае будет доступна через хук useLocation. Использовать этот хук очень просто, так как он возвращает одно значение и не принимает никаких параметров.

const location = useLocation()

Если у нас есть следующий URL http://localhost/books?n=32#id то возвращаемое значение useLocation будет выглядеть следующим образом.

{
  pathname: "/books",
  search: "?n=32",
  hash: "#id",
  key: "2JH3G3S",
  state: null
}

Этот объект местоположения содержит всю информацию, относящуюся к нашему URL-адресу. Он также содержит уникальный ключ, который можно использовать для кэширования, если вы хотите кэшировать информацию, когда пользователь нажимает кнопку «Назад», чтобы вернуться на страницу. Вы также заметите, что у нас есть проп state, возвращаемое из useLocation. Эти данные состояния могут быть любыми и передаются между страницами без сохранения в URL-адресе. Например, если вы нажмете на Link, которая выглядит следующим образом:

<Link to="/books" state={{ name: "Kyle" }}>

тогда значение состояния в объекте location будет установлено в { name: "Kyle" }. Это может быть очень полезно, если, например, вы хотите отправлять простые сообщения между страницами, которые не должны храниться в URL-адресе. Хорошим примером этого может быть что-то вроде сообщения об успешном завершении, которое отправляется на страницу, на которую вы перенаправляетесь после создания новой книги.

В этой статье повнимательнее рассмотрим два новых хука: 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>
 );
}

Итоги

Эти два новых хука позволяют сделать интерфейсы максимально отзывчивыми, даже в сложных приложениях с большим количеством повторных рендерингов, отдавая приоритет обновлениям, которые имеют решающее значение для взаимодействия с пользователем, и помечая некоторые другие как менее важные. Это не означает, что нужно оборачивать все состояния этими хуками. Их следует использовать в крайнем случае, если приложение или компоненты не могут быть оптимизированы другими способами (например, при помощи lazy loading’а, пагинации, веб-воркеров и т. д.).