Tengo una página donde un usuario puede acotar su búsqueda usando filtros. El problema es que cuando un usuario hace clic en un filtro para filtrar propiedades por "alquilar" o "comprar", la URL no se actualiza para reflejar los cambios. Sin embargo, los cambios aparecen en la URL, que es lo que quiero, pero tengo que presionar Intro manualmente para actualizar la página con los filtros especificados, para que aparezcan los cambios.

Como puede ver en la foto, las propiedades enumeradas no son propiedades "en alquiler", por lo que la única forma de ver correctamente las propiedades en alquiler es ingresar manualmente la URL: http://localhost:3000/search?purpose=for-rent&minPrice=20000

 import { Flex, Select, Box, } from "@chakra-ui/react"; import { useRouter } from "next/router"; import Image from "next/image"; import { filterData, getFilterValues } from "../utils/filterData"; class searchFilters extends Component { constructor(props) { super(props); this.state = { filters: filterData, }; } handleChange = (filterValues) => { const path = this.props.params.pathname; const { query } = this.props.params; const values = getFilterValues(filterValues); values.forEach((item) => { if (item.value && filterValues?.[item.name]) { query[item.name] = item.value; } }); this.props.params.push({ pathname: path, query: query }); }; render() { const { filters } = this.state; return ( <Flex bg="gray.100" p="4" justifyContent="center" flexWrap="wrap"> {filters.map((filter) => ( <Box key={filter.queryName}> <Select placeholder={filter.placeholder} w="fit-content" p="2" onChange={(e) => this.handleChange({ [filter.queryName]: e.target.value }) } > {filter.items.map((item) => ( <option value={item.value} key={item.value}> {item.name} </option> ))} </Select> </Box> ))} </Flex> ); } } const withParams = (Component) => { return (props) => <Component {...props} params={useRouter()} />; }; export default withParams(searchFilters);