UrlSearchParams не обновляет URL
Я пытаюсь добавить поиск и страницу к своему URL-адресу для поиска и разбиения на страницы на странице.
const urlParams = new URLSearchParams(window.location.search);
if (!urlParams.has('search'){
urlParams.append('search', question);
}
if (!urlParams.has('page'){
urlParams.append('page', pageIndex);
}
Кажется, это ничего не делает с фактическим URL-адресом. Но когда я вызываю urlParams.toString() тогда я вижу, что они были добавлены, но их нет в фактическом URL-адресе в браузере.
Я использую Chrome 107, поэтому он должен его поддерживать. Я что-то пропустил?
Документация мне пока не помогла.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете попробовать так:
Сначала извлеките текущий path. Затем добавьте urlParams к полученному пути и используйте history.pushState(), чтобы установить новый URL-адрес.
const question = "the question";
const pageIndex = 3;
const urlParams = new URLSearchParams(window.location.search);
if (! urlParams.has('search')) {
urlParams.append('search', question);
}
if (! urlParams.has('page')) {
urlParams.append('page', pageIndex);
}
const path = window.location.href.split('?')[0];
const newURL = `${path}?${urlParams}`;
history.pushState({}, '', newURL);
Источники:
Конечно, это ничего не делает с фактическим URL-адресом, вы создаете объект URLParameters и обновляете его. что вам не хватает:
window.loacation.search = urlParams.toString()
он изменит строку запроса в URL-адресе браузера и перезагрузит страницу.
если вы не заинтересованы в перезагрузке страницы, вы можете использовать объект history DOM
let url = new URL(window.location.href);
if (!(url.searchParams.has('search'))){
url.searchParams.append('search', question);
}
if (!(url.searchParams.has('page'))){
url.searchParams.append('page', pageIndex);
}
history.pushState({},'',url.href);
наконец, если вы все равно хотите обновить параметры page и search, вы можете использовать метод url.searchParams.set(), например:
url.searchParams.set('page', pageIndex);
он добавит параметр, если он не существует, и обновит его, если он существует, без создания исключений.