Tengo un botón en el cuerpo que, una vez que se hace clic, debe agregar un parámetro de consulta adicional en la URL.
let addParam; const button = document.createElement("BUTTON"); button.textContent = "Add"; document.body.prepend(button); button.addEventListener("click", () => { const url = new URL(window.location.href); url.searchParams.set("param", "value"); window.history.pushState({ path: url.href }, "", url.href); addParam = addParam ? false : true; }); Funciona bien, el problema es que la URL actual ya contiene un parámetro de consulta en forma de ?path=path/to/file , por lo que cuando configuramos otro parámetro con set(key, value) , cambia la ?path=path/to/file a ?path=path%2Fto%2Ffile . ¿Hay alguna manera de evitar que eso suceda y mantener la URL original?
Tenga en cuenta que ambas URL significan lo mismo. Supongo que prefieres el que tiene / en lugar de la forma codificada porque es más obvio para las personas que leen la URL.
Esto puede variar según el navegador, pero en los navegadores basados en Chromium parece que mantiene / si está en la URL que pasa a pushState . Son los URLSearchParams los que codifican / .
Originalmente publiqué una solución haciendo concatenación de cadenas con encodeURIComponent en su lugar, pero mi solución estaba haciendo un append , no un set . Su código está usando set . Afortunadamente, también incluí una segunda solución: puede convertir %2F a / después de agregar los parámetros de búsqueda y convertirlos en una cadena:
const { origin, pathname, search } = window.location; const searchParams = new URLSearchParams(search); searchParams.set("param", "value"); const paramsString = searchParams.toString().replace(/%2f/gi, "/"); const url = `${origin}${pathname}?${paramsString}`; window.history.pushState({ path: url }, "", url); addParam = addParam ? false : true;Tenga en cuenta que no abogo por esto. Yo me quedaría con el código que tienes. Pero es tu proyecto, así que tú decides. :-)