Tengo una ruta /discovery donde muestro los resultados de mi búsqueda, también intento sincronizar mi estado de búsqueda con los parámetros de consulta de URL, por lo que si el usuario escribe "pollo", la URL se convierte en - /discovery?query=chicken&page=1

una vez que el usuario haga clic en el resultado, navegará a /mealpreview/[id]

Sin embargo, cuando intento navegar hacia atrás de esta manera:

 <IconButton color="inherit" onClick={() => router.back()}> <ArrowBackIcon /> </IconButton>

la URL vuelve a cambiar a - /discovery?query=chicken&page=1 pero sigue mostrando la misma página.

Cuando vuelvo a hacer clic en el botón Atrás, funciona y vuelve a /discovery

Cuando no uso parámetros de URL, todo funciona, ¿qué sucede aquí?

Por cierto, así es como sincronizo el estado de mi URL:

 import React, { Component } from "react"; import qs from "qs"; const updateAfter = 700; export const isClient = !(typeof window === "undefined"); const searchStateToURL = (searchState) => searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : ""; const withURLSync = (TestSearch) => class WithURLSync extends Component { state = { searchState: qs.parse(isClient && window.location.search.slice(1)), }; componentDidMount() { if (isClient) { window.addEventListener("popstate", this.onPopState); } } componentWillUnmount() { clearTimeout(this.debouncedSetState); window.removeEventListener("popstate", this.onPopState); } onPopState = ({ state }) => this.setState({ searchState: state || {}, }); onSearchStateChange = (searchState) => { clearTimeout(this.debouncedSetState); this.debouncedSetState = setTimeout(() => { window.history.pushState( searchState, null, searchStateToURL(searchState) ); }, updateAfter); this.setState({ searchState }); }; render() { const { searchState } = this.state; return ( <TestSearch {...this.props} searchState={searchState} onSearchStateChange={this.onSearchStateChange} createURL={searchStateToURL} /> ); } }; export default withURLSync;