Для изменения 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.