useRouter 仅在我到达网站的错误页面（NextJS）时才起作用

Question

每当在我的搜索栏组件中提交查询时，当前网页实际上不会改变，仅在网站 URL 的末尾显示一个

/?

。但是，当我在路由器中手动输入不正确的页面路由（例如，

/test

）时，每当我通过将查询推到 URL 路径末尾来提交查询时，搜索栏就会突然按预期工作。重新加载网页会再次出现该问题。为了使组件正常工作，应该将

/search?q=[QUERY HERE]

推送到路由器。

发生什么事了？这是 NextJS 的错误还是我做错了什么？对于上下文，我使用的是 App Router，该组件是一个布局组件。

search-bar.tsx：

"use client";
import { useState } from "react";
import styles from "../app/styles/navbar.module.css"
import { useRouter, useSearchParams } from "next/navigation";

const SearchBar: React.FC = () => {
    const [query, setQuery] = useState("");
    const searchParams = useSearchParams();
    let router = useRouter();

    return (
        <form className={ styles.search } onSubmit={() => router.replace("/search?q=" + query)}>
            <input type="text" placeholder="Search here..." value={ query } onChange={(e) => setQuery(e.target.value)}/>
            <button type="submit" onClick={() => router.replace("/search?q=" + query)}>Search</button>
        </form>
    );
}

export default SearchBar;

Answer 1

如果不知道您的

/search

路线到底做了什么，我无法提供最佳答案，但我认为这可能是替换的问题，您可以使用

router.push

而不是

router.replace

来保留导航历史记录，以便它可以持续存在重新加载之间。另外，尝试使用

Link

提供的

NextJS

组件。您可以将

form

包装在 Link 组件中，如下所示：

    <Link href="/search?q={query}" passHref>
      <form className={styles.search}>
        <input
          type="text"
          placeholder="Search here..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>
    </Link>

我希望这对您有帮助，至少我会这样做，并且它以前对我有用。