Quiero usar router.push() para cambiar la URL al hacer clic en el botón Search . Sin embargo, por lo que he notado, esta función funciona a veces ya veces no. En la versión final, después de presionar el botón, el usuario debe ser redirigido a la página /search con el texto ingresado en el campo de entrada. Sin embargo, esto no está sucediendo y no puedo encontrar ningún error en mi código.

Esa es mi función de búsqueda en index.js :

 const [searchInput, setSearchInput] = useState(""); const router = useRouter() const Search = () => { router.push({ pathname: "/search", query: { city: searchInput, } }, ); };

Y ese es mi formulario en index.js

 <form className={"flex flex-col items-center mt-44 flex-grow"}> <h1 className={"flex justify-center font-bold pt-20 text-4xl"}>Enter address</h1> <div className={"flex w-full mt-5 hover:shadow-lg focus-within:shadow-lg max-w-md rounded-full border border-gray-200 px-5 py-3 items-center sm:max-w-xl lg:max-w-2xl"}> <input value={searchInput} onChange={(e) => setSearchInput(e.target.value)} type={"text"} className={"flex-grow focus:outline-none"}/> <SearchIcon className={"h-5 text-gray-500"}/> </div> <div className={"flex flex-col w-1/2 space-y-2 justify-center mt-8 sm:space-y-0 sm:flex-row sm:space-x-4"}> <button onClick={Search} className={"btn"}>Search</button> </div> </form>

Tal vez eso sea algo con mi configuración de WebStorm, ya que a veces funciona y otras veces no. No tengo ninguna idea para ser honesto.