我想在單擊按鈕router.push()時使用更改 url 。Search但是，據我所知，此功能有時有效，有時無效。在最終版本中，按下按鈕后，用戶應該被重定向到/search在輸入欄位中輸入文本的頁面。但是，這沒有發生，我在我的代碼中找不到任何錯誤。
那是我的搜索功能index.js：
const [searchInput, setSearchInput] = useState("");
const router = useRouter()
const Search = () => {
router.push({
pathname: "/search",
query: {
city: searchInput,
}
},
);
};
這就是我的形式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>
也許這與我的 WebStorm 配置有關，因為它有時有效，有時無效。老實說，我沒有任何想法。
uj5u.com熱心網友回復：
默認的表單提交可能會干擾您的Search功能。
你可能想要這樣的東西：
const Search = (e) => {
e.preventDefault();
router.push({
pathname: "/search",
query: {
city: searchInput,
}
},
);
};
有關更多資訊，請參見此處：https ://www.robinwieruch.de/react-preventdefault/
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463791.html
標籤：javascript 反应 下一个.js 路由器