React router dom как поменять query параметр?

Для изменения query параметра в React при использовании React Router Dom, вам потребуется использовать два основных объекта: useLocation и useHistory.

Объект useLocation предоставляет доступ к текущему объекту location, который содержит информацию о текущем маршруте и query параметрах. Объект useHistory позволяет управлять историей браузера и переходами между страницами.

Для изменения query параметра вам необходимо выполнить следующие шаги:

1. Импортируйте useLocation и useHistory из пакета react-router-dom:

import { useLocation, useHistory } from 'react-router-dom';

2. Используйте useLocation() и useHistory() внутри вашего компонента, чтобы получить доступ к текущему location объекту и истории:

const location = useLocation();
const history = useHistory();

3. Чтобы изменить или добавить query параметр, вам нужно обновить текущий location.search и затем перенаправить пользователя с помощью history.push():

const handleClick = () => {
  const searchParams = new URLSearchParams(location.search);
  searchParams.set('yourParamName', 'yourParamValue');
  const newSearch = `?${searchParams.toString()}`;

  history.push({
    pathname: location.pathname,
    search: newSearch,
  });
}

Здесь мы используем URLSearchParams, чтобы манипулировать существующими query параметрами, добавить или изменить их значение. Затем мы передаем новое значение search в history.push(), чтобы обновить URL и перенаправить пользователя на новую страницу.

Обратите внимание, что в примере выше мы использовали location.pathname для сохранения текущего пути страницы, чтобы новый URL сохранил текущий маршрут без изменений. Если вам необходимо изменить и путь и query параметры, то вы можете изменить pathname на новый путь.

Таким образом, вы можете использовать useLocation и useHistory для изменения query параметров в React с использованием React Router Dom.