React Router — Параметры запросов

Параметры запроса
Параметры запроса появляются в URL-адресах, начинающихся со знака вопроса (?), и за ними следует имя параметра, которому присваивается значение. Они необязательны и чаще всего используются для поиска, сортировки и/или фильтрации ресурсов.

Например, если вы перейдете по приведенному ниже URL-адресу…

https://www.google.com/search?q=codecademy
Войти в полноэкранный режим Выйти из полноэкранного режима

вы попадете на страницу /search компании Google, где будут показаны результаты поиска по поисковому запросу codecademy. В этом примере параметр запроса называется q.

React Router предоставляет механизм для захвата значений параметров запроса: хук useLocation(). При вызове useLocation() возвращает объект location со свойством search, которое часто извлекается напрямую с помощью синтаксиса деструктуризации. Это поисковое значение соответствует строке запроса текущего URL.

Рассмотрим этот пример компонента SortedList:

import { useLocation } from 'react-router-dom'

// Rendered when a user visits "/list?order=DESC"
export const SortedList = (numberList) => {
  const { search } = useLocation();
  console.log(search); // Prints "?order=DESC"
};
Вход в полноэкранный режим Выйти из полноэкранного режима

Хотя мы могли бы самостоятельно разобрать эту строку поиска, чтобы получить значение параметра запроса (‘DESC’), часто для этого используется встроенный конструктор URLSearchParams:

import { useLocation } from 'react-router-dom'

// Rendered when a user visits "/list?order=DESC"
export const SortedList = (numberList) => {
  const { search } = useLocation();
  const queryParams = new URLSearchParams(search);
  const order = queryParams.get('order');
  console.log(order); // Prints 'DESC'
};
Войти в полноэкранный режим Выход из полноэкранного режима

Давайте разберем этот пример:

  1. Во-первых, мы импортируем useLocation() и вызываем ее внутри SortedList, чтобы получить строку параметров поискового запроса ‘?order=DESC’.
  2. Затем мы передаем строку поиска в новый конструктор URLSearchParams(), который возвращает объект, часто называемый queryParams. Этот объект имеет метод .get() для получения значений параметров запроса.
  3. Наконец, чтобы получить значение конкретного параметра запроса, мы передаем имя параметра запроса, значение которого мы хотим получить, в виде строки (‘order’) в метод queryParams.get(). Затем значение (‘DESC’) сохраняется в переменной order.

Давайте расширим пример SortedList, чтобы компонент использовал значение order для отображения списка данных либо в порядке возрастания, либо в порядке убывания, либо в естественном порядке.

import { useLocation } from 'react-router-dom'

// Rendered when a user visits "/list?order=DESC"
export const SortedList = (numberList) => {
  const { search } = useLocation();
  const queryParams = new URLSearchParams(search);
  const sortOrder = queryParams.get('order');

  if (sortOrder === 'ASC') {
    // render the numberList in ascending order
  } else if (sortOrder === 'DESC') {
    // render the numberList in descending order
  } else {
    // render the numberList as is
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, если пользователь посетит /list?order=DESC, значение ‘DESC’ будет извлечено, и мы сможем отобразить компонент SortedList в порядке убывания. Аналогично, при посещении /list?order=ASC список будет отображаться в порядке возрастания. Наконец, поскольку параметры запроса необязательны, если мы посетим /list, компонент SortedList будет отображаться в естественном порядке.

Оцените статью
Procodings.ru
Добавить комментарий