la solución a lo que buscas se puede implementar mediante el objeto de window llamado history, donde agregas parámetros a la url, sin que recargue la pagina, y cambias el estado del historial del navegador, por lo cual al volver atrás se vuelve a la url anterior, pero sin recargar, a su vez, tambien necesitas escuchar el evento "onpopstate" para detectar cuando se clickean los botones de atrás y adelante del navegador, preguntando en ese momento entonces cuales son los parámetros de la url que cambiaron para aplicar tus cambios en la web, te dejo un par de funciones de ejemplo que hice:
Esta función te permite pasarle parámetros en forma de objeto, y los va a convertir en parámetros tipo get para la url, y luego los seteará en la url y el history del navegador:
const setUrlParams = (params) => {
if(!params)
return;
const paramsUrl = Object.entries(params)
.reduce((acum, actual, index) => (
`${acum}${index === 0 ? '?' : '&'}${actual[0]}=${actual[1]}`
), '');
const newUrl = paramsUrl;
// Según los valores que setees en los parámetros, mostras lo que quieras mostrar en tu web
// en esto que sigue se cambia el estado del history, y setea los parametros,
if(window.history.pushState)
window.history.pushState(null, null, newUrl);
};
ejemplo de llamado a esta funcion:
setUrlParams({param1: 'valor1', param2: 'valor2'});
// la url cambiara a: www.tu-anterior-url.com/?param1=valor1¶m2=valor2
y luego, este evento te permitira acceder a la nueva url cuando clickees en las flechas del navegador y dicha url cambie, en dicho evento tambien debes capturar los parametros para mostrar segun ellos, lo que quieras mostrar en tu web:
window.onpopstate = () => {
const urlChanged = window.location.href;
console.log(urlChanged);
// aquí luego agarras los parámetros de la nueva url y los usas a gusto
};
por lo cual cuando vayas atrás o adelante en el navegador, se disparara este evento y el código que pongas en el.
Espero te sirva, saludos!