Как добавить параметры запроса (query params)

Что такое query params и зачем они нужны?

Query params — это параметры, которые добавляются к URL после знака вопроса (?) и используются для передачи данных между клиентом и сервером или для управления состоянием интерфейса. Например, если у вас есть URL https://example.com?search=react&page=2, то search=react и page=2 — это query params.

Зачем они нужны? Во-первых, они помогают серверу понимать, какую информацию вы запрашиваете. Например, вы можете передавать параметры для фильтрации или пагинации. Во-вторых, они удобны для сохранения текущего состояния интерфейса — даже если пользователь обновит страницу, параметры останутся в URL, и вы сможете восстановить нужное состояние.

Как работать с query params в React?

В React для работы с параметрами запроса обычно используют библиотеку React Router. Это популярное решение, которое упрощает навигацию и работу с URL.

Настройка проекта с React Router

Чтобы начать, сначала убедитесь, что React Router установлен. Если он не установлен, выполните следующую команду:

npm install react-router-dom

После установки добавьте базовую настройку маршрутов. Например:

import React from 'react';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';



const App = () => {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/search" element={<Search />} />

      </Routes>

    </Router>

  );

};



const Home = () => <h1>Главная страница</h1>;

const Search = () => <h1>Страница поиска</h1>;



export default App;

Теперь приложение поддерживает базовые маршруты. Следующий шаг — работа с query params.

Получение query params в компоненте

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

Пример:

import React from 'react';

import { useSearchParams } from 'react-router-dom';



const Search = () => {

  const [searchParams] = useSearchParams();

  const query = searchParams.get('query'); // Получение параметра 'query'

  const page = searchParams.get('page'); // Получение параметра 'page'



  return (

    <div>

      <h1>Результаты поиска</h1>

      <p>Запрос: {query}</p>

      <p>Страница: {page}</p>

    </div>

  );

};



export default Search;

1. Подключите хук useSearchParams. Это позволяет получить доступ к объекту query params.
2. Используйте метод get. Он возвращает значение конкретного параметра.
3. Выведите значения на экран. Это покажет, что параметры успешно читаются из URL.

Добавление query params

Если вы хотите добавить параметры запроса в URL, это тоже можно сделать с помощью useSearchParams.

Пример:

import React from 'react';

import { useSearchParams } from 'react-router-dom';



const Search = () => {

  const [searchParams, setSearchParams] = useSearchParams();



  const handleSearch = () => {

    setSearchParams({ query: 'react', page: '1' });

  };



  return (

    <div>

      <h1>Добавить параметры запроса</h1>

      <button onClick={handleSearch}>Искать "React"</button>

    </div>

  );

};



export default Search;

1. Используйте метод setSearchParams. Этот метод обновляет URL с новыми параметрами.
2. Передайте объект параметров. Укажите ключи и значения, которые вы хотите добавить в URL.
3. Добавьте обработчик события. Например, при нажатии кнопки можно обновить параметры запроса.

Сложные сценарии с query params

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

Пример:

const handlePageChange = () => {

  const currentParams = Object.fromEntries(searchParams.entries());

  setSearchParams({ ...currentParams, page: '2' });

};

1. Получите текущие параметры. С помощью Object.fromEntries создайте объект из существующих параметров.
2. Добавьте новый параметр. Используйте spread-оператор, чтобы сохранить существующие значения и добавить новые.
3. Обновите URL. Передайте обновленный объект в setSearchParams.