Как обновить параметры запроса в React

Параметры запроса — это пары имя/значение, которые можно добавить в конец URL-адреса. Они позволяют хранить данные в этом URL.

Одним из практических применений параметров запроса является сохранение результатов поиска пользователя.

Использование React Router для обновления параметров запроса

Когда пользователь вводит запрос в строку поиска, вы должны сохранить этот запрос в URL-адресе. Например, если пользователь искал в списке блогов сообщения в категории «реакция», обновленный URL-адрес должен выглядеть следующим образом: /posts? тег = реагировать.

React предоставляет хук useSearchParams, который помогает вам читать или обновлять строки запроса.

Для начала создайте панель поиска в App.js.

Импортировать { состояние использования } 





instagram viewer

от"реагировать";
экспортпо умолчаниюфункцияПриложение() {
константа [запрос, заданный запрос] = useState('')
константа дескриптор изменения = (е) => {
setquery(е.цель.ценить)
 };
возвращаться (
<див>
<формароль="поиск">
<входпо изменению={handleChange}ценить={запрос}тип="поиск" />
форма>
див>
 );
}

Не забудьте подписаться лучшие практики при использовании React чтобы получить от них максимальную отдачу.

Затем установите маршрутизатор React и добавьте маршрутизацию в свое приложение. Это необходимо для работы хука useSearchParams.

Импортировать Реагировать от"реагировать";
Импортировать РеактДОМ от"реагировать дом/клиент";
Импортировать"./index.css";
Импортировать Приложение от"./Приложение";
Импортировать {БраузерРоутер, Маршрут, Маршруты} от"реагировать-роутер-дом";
константа корень = ReactDOM.createRoot(документ.getElementById("корень"));
корень.оказывать(
<Реагировать. Строгий режим>
<БраузерРоутер>
<Маршруты>
"/" элемент={} />
Маршруты>
БраузерРоутер>
Реагировать. Строгий режим>
);

Теперь вы можете сохранять запросы в URL-адресе по мере ввода пользователем, изменив функцию handleChange().

Импортировать { состояние использования } от"реагировать";
Импортировать { использовать параметры поиска } от"реагировать-роутер-дом";
экспортпо умолчаниюфункцияПриложение() {
константа [запрос, заданный запрос] = useState("");
константа [SearchParams, setSearchParams] = useSearchParams({});
константа дескриптор изменения = (е) => {
setSearchParams({ запрос: e.target.value });
setquery(е.цель.ценить);
 };
возвращаться (
<див>
<формароль="поиск">
<входпо изменению={handleChange}ценить={запрос}тип="поиск" />
форма>
див>
 );
}

Получение значений запроса из URL-адреса

Вы можете получить одно значение запроса, используя searchParams.get() и передав имя параметра запроса.

константа [SearchParams, setSearchParams] = useSearchParams({});
константа значение = searchParams.get('ярлык')

Чтобы получить все параметры запроса, используйте searchParams.entries().

константа [SearchParams, setSearchParams] = useSearchParams({});
константа значения = searchParams.entries()

Этот метод возвращает итератор, который вы можете перебирать, используя пары ключ/значение.

для (константа [ключ, значение] из ценности) {
консоль.бревно(`${ключ}, ${значение}`);
}

Пары ключ/значение находятся в том порядке, в котором они появляются в URL-адресе.

Используйте параметры запроса, чтобы улучшить совместное использование результатов поиска

Хук useSearchParams отлично подходит для хранения значений поиска или любых других данных в качестве параметров запроса в URL-адресе.

Вы также можете отслеживать значения поиска с помощью хука useState, но сохранение их в параметре запроса означает, что люди могут делиться ими через URL-адрес.