Router.push() 在不同时间以不同方式工作

Question

我想在点击 Search 按钮时使用 router.push() 更改 url。但是，据我所知，此功能有时有效，有时无效。在最终版本中，按下按钮后，用户应该被重定向到 /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 配置有关，因为它有时有效，有时无效。老实说，我不知道。

Answer 1

可能是默认 form-submission 干扰了您的 Search 功能。

你可能想要这样的东西：

    const Search = (e) => {
        e.preventDefault();

        router.push({
            pathname: "/search",
            query: {
                city: searchInput,
            }
            },
        );
    };

查看此处了解更多信息：https://www.robinwieruch.de/react-preventdefault/

Router.push() 在不同时间以不同方式工作

Router.push() working differently at different times

javascript

router

reactjs

next.js