Полное руководство по 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-адресе. Хорошим примером этого может быть что-то вроде сообщения об успешном завершении, которое отправляется на страницу, на которую вы перенаправляетесь после создания новой книги.

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

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

Основы React Router

Прежде чем мы начнем углубляться в расширенные функции React Router, сначала поговорим об основах React Router. Чтобы использовать React Router, вам необходимо запустить npm i react-router-dom для установки React Router. Эта библиотека устанавливает DOM версию React Router. Если вы используете React Native, вам нужно будет установить react-router-native. За исключением этого небольшого отличия, библиотеки работают почти одинаково. В этой статье сосредоточимся на react-router-dom, но, как уже упоминалось, обе библиотеки почти идентичны. Чтобы использовать React Router, вам нужно сделать три вещи.

1. Настроить роутер
2. Прописать свои маршруты
3. Управлять навигацией

Настройка роутера

Настройка роутера является самым простым шагом. Все, что вам нужно сделать, это импортировать конкретный роутер, который вам нужен (BrowserRouter для веба и NativeRouter для мобильных устройств) и обернуть все ваше приложение в этот роутер.

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

Как правило, вы импортируете свой маршрутизатор в файле index.js вашего приложения, и он будет оборачивать компонент App. Роутер работает так же, как контекст в React, и предоставляет всю необходимую информацию вашему приложению, чтобы вы могли выполнять маршрутизацию и использовать все пользовательские хуки из React Router.

Определение маршрутов

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

import { Route, Routes } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"

export function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/books" element={<BookList />} />
    </Routes>
  )
}

Определить маршруты так же просто, как определить компонент Route для каждого маршрута в приложении, а затем поместить все эти компоненты Route в один компонент Routes. Всякий раз, когда ваш URL-адрес изменяется, React Router будет просматривать маршруты, определенные в вашем компоненте Routes, и он будет отображать содержимое в пропсе element роута Route, который имеет path, соответствующий URL-адресу. В приведенном выше примере, если бы наш URL-адрес был /books, то отображался бы компонент BookList. Преимущество React Router заключается в том, что при переходе между страницами он обновляет только содержимое внутри вашего компонента Routes. Весь остальной контент на вашей странице останется прежним, что повысит производительность и удобство использования.

Управление навигацией

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

import { Route, Routes, Link } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"

export function App() {
  return (
    <>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/books">Books</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/books" element={<BookList />} />
      </Routes>
    </>
  )
}

В нашем примере мы добавили две ссылки на главную страницу и страницу книг. Вы также заметите, что мы использовали проп to для установки URL-адреса вместо пропса href, который вы привыкли использовать с тегом <a>. Это единственное различие между компонентом Link и тегом <a>, и это то, что вам нужно помнить, так как легко ошибочно случайно использовать проп href вместо to. Еще одна вещь, которую следует отметить в нашем новом коде, заключается в том, что <nav>, который мы создаем в верхней части нашей страницы, находится за пределами нашего компонента Routes, что означает, что при смене страниц этот раздел навигации не будет повторно рендериться, так при изменении URL-адреса изменится только содержимое компонента Routes.