Хранение поисковых запросов в URL с помощью React Router

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

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

Как это работает кратко

Термины:

• Query-параметр — часть URL после ? вида name=value.
• useSearchParams — хук React Router для чтения и записи query-параметров.

Когда пользователь вводит запрос в строку поиска, стоит синхронизировать это значение с URL. Например, при поиске по тегу “react” URL может выглядеть так: /posts?tag=react.

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

Ниже шаги и примеры кода. Помните: для работы useSearchParams ваше приложение должно быть обёрнуто в BrowserRouter.

Создайте простую строку поиска в App.js:

import { useState } from "react";  
export default function App() {  
  const [query, setquery] = useState('')  
  const handleChange = (e) => {  
    setquery(e.target.value)  
  };  
  return (  
    
  
        
          
        
    
  
  );  
}

Важно: подключите React Router и настройте маршрутизацию — без этого useSearchParams не будет работать.

import React from "react";  
import ReactDOM from "react-dom/client";  
import "./index.css";  
import App from "./App";  
import { BrowserRouter, Route, Routes } from "react-router-dom";  
  
const root = ReactDOM.createRoot(document.getElementById("root"));  
root.render(  
    
      
        
        } />  
        
      
    
);  

Теперь можно сохранять значение поискового поля в URL по мере ввода, изменив handleChange:

import { useState } from "react";  
import { useSearchParams } from "react-router-dom";  
  
export default function App() {  
  const [query, setquery] = useState("");  
  const [searchParams, setSearchParams] = useSearchParams({});  
  
  const handleChange = (e) => {  
    setSearchParams({ query: e.target.value });  
    setquery(e.target.value);  
  };  
  return (  
    
  
        
          
        
    
  
  );  
}  

Получение значений query-параметров из URL

Вы можете прочитать один параметр через searchParams.get():

const [searchParams, setSearchParams] = useSearchParams({});  
const value = searchParams.get('tag')  

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

const [searchParams, setSearchParams] = useSearchParams({});  
const values = searchParams.entries()  

Этот метод возвращает итератор пар ключ/значение, который удобно обходить в цикле:

for (const [key, value] of values) {  
    console.log(`${key}, ${value}`);  
}  

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

Почему это полезно

• Совместное использование: пользователь может отправить URL с результатом поиска другому человеку.
• Сохранение состояния: после перезагрузки страница может восстановить фильтры/поиск.
• Навигация по истории: переход назад/вперёд восстанавливает параметры.

Важно: не храните в query-параметрах чувствительные данные (пароли, личную информацию).

Альтернативные подходы

• useLocation + URLSearchParams: если вы не хотите использовать useSearchParams, вы можете читать location.search и парсить через URLSearchParams.
• Локальный state (useState): проще, но не даёт shareable URL.
• Глобальное состояние (Redux, Zustand): полезно при сложных фильтрах; URL можно синхронизировать дополнительно.

Когда это не подходит

• Большие объёмы данные (например, большие массивы или двоичные данные) — в URL нельзя помещать тяжёлые данные.
• Конфиденциальные данные — не храните в открытом URL.
• Если вам нужна строгая валидация и совместимость с серверной маршрутизацией, потребуется дополнительная обработка.

План действий — минимальный рабочий процесс

1. Оберните приложение в BrowserRouter.
2. В компоненте поиска используйте useSearchParams и useState.
3. При изменении поля обновляйте setSearchParams и локальный state.
4. При монтировании компонента инициализируйте поле из searchParams.get().
5. Добавьте валидацию и дебаунс при необходимости (чтобы не писать в URL на каждый ввод).

Пример: инициализация поля из URL

const [searchParams, setSearchParams] = useSearchParams({});
const initial = searchParams.get('query') || '';
const [query, setQuery] = useState(initial);

// далее обновляем setSearchParams при вводе

Примечание: добавляйте дебаунс (например, 300–500 мс) перед записью в URL, если не хотите много обновлений истории браузера.

Критерии приёмки

• При вводе в поле поиска URL обновляется и содержит query-параметр.
• Повторная загрузка страницы восстанавливает значение поля из URL.
• Кнопка «поделиться» даёт ссылку, которая при открытии восстанавливает те же результаты.
• В URL не сохраняются чувствительные данные.

Чек-лист для разработчика

• Приложение обёрнуто в BrowserRouter
• Компонент использует useSearchParams
• Значение поля инициализируется из URL при монтировании
• Обновления в URL дебаунсятся при необходимости
• Тесты покрывают поведение при reload/back/forward
• Не сохраняются личные данные в URL

Тест-кейсы/приёмо-сдаточные сценарии

1. Ввести “react” в поле поиска → URL содержит ?query=react → при reload поле показывает “react”.
2. Открыть ссылку /posts?tag=react → компонент читает tag и фильтрует список.
3. Нажатие кнопки назад восстанавливает предыдущие query-параметры.
4. При вводе быстрого текста без дебаунса история не должна засоряться слишком большим числом записей.

Краткие рекомендации безопасности и конфиденциальности

• Никогда не помещайте в URL пароли или персональные идентификаторы.
• Если нужно передать идентификатор пользователя — используйте короткие неизменяемые id и контроль доступа на сервере.

1-строчный глоссарий

• useSearchParams — React Router хук для чтения и записи query-параметров через интерфейс, похожий на URLSearchParams.

Резюме

• useSearchParams упрощает синхронизацию поисковых полей с URL.
• Это улучшает shareability и устойчивость к перезагрузкам.
• Для сложных сценариев рассмотрите комбинацию с глобальным state и дебаунсом.

Если нужно, могу добавить пример с дебаунсом или реализацию синхронизации нескольких фильтров и пагинации.