NextJS App Router搜索栏仅在错误页生效的问题排查

核心问题：表单默认提交行为未阻止 #

你的代码里，表单的onSubmit只调用了路由跳转，但浏览器默认的表单提交行为没被阻止。当提交表单时，浏览器会优先执行默认的GET提交，把表单数据（这里没给输入框加name属性，所以只会在当前URL后加/?）追加到地址栏，这直接覆盖了你用router.replace做的跳转操作。

至于手动输入错误路径后能正常跳转，只是因为那个不存在的页面没有触发相同的表单默认行为冲突，但本质还是你的代码没处理表单默认事件。另外，按钮上重复绑定onClick完全没必要，表单的onSubmit已经能处理点击按钮或回车提交的场景。

修复后的代码 #

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

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

    const handleSubmit = (e: React.FormEvent) => {
        // 阻止浏览器默认表单提交行为
        e.preventDefault();
        if (!query.trim()) return; // 空查询直接返回，避免无效跳转
        // 用URLSearchParams构建查询参数，避免手动拼接的编码问题
        const searchUrl = new URL("/search", window.location.origin);
        searchUrl.searchParams.set("q", query);
        router.replace(searchUrl.toString());
    };

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

export default SearchBar;

关键修改点 #

• 给onSubmit添加事件参数，调用e.preventDefault()彻底阻断默认提交行为
• 移除按钮上多余的onClick绑定，统一用表单onSubmit处理提交逻辑
• 用URLSearchParams构建带查询参数的URL，避免手动拼接字符串时的特殊字符编码问题
• 增加空查询判断，避免无效跳转

内容的提问来源于stack exchange，提问作者bascott