Next.js 14 App Router：router.push丢失searchParams问题求助

问题现象 #

使用Next.js 14.1.4的客户端组件实现搜索表单，提交时本应重定向到携带正确查询参数的/search页面，但多数情况下查询参数会被截断，最终地址仅为https://fakedomain.com/search。手动在地址栏添加查询参数时页面能正常工作；若去掉router.push路径开头的/，参数可正常传递，但从非根路径触发时会出现错误重定向。

客户端组件代码 #

"use client";
import { useRouter } from "next/navigation";
import { useRef, useState } from "react";

const Navbar = (props) => {
    const inputRef = useRef(null);
    const router = useRouter();
    const [isSearchOpen, setIsSearchOpen] = useState(true);

    const handleSubmit = (e) => {
        e.preventDefault();
        setIsSearchOpen(false);
        router.push(`/search/?query=${encodeURIComponent(inputRef.current?.value)}`);
    };

    return (
        <nav>
            {/* 其他无关代码省略 */}
            <form onSubmit={handleSubmit} className="relative w-full mx-40">
                <input className="w-full outline-none" ref={inputRef} />
                <button className="absolute right-0 bottom-0 h-4 w-4 bg-primary" type="submit" />
            </form>
        </nav>
    );
};

export default Navbar;

服务端组件代码 #

const SearchPage = async (props) => {
    const { searchParams, params } = props;
    console.log(searchParams); // 表单提交时输出undefined

    // 搜索逻辑处理

    return (
        {/* 结果渲染代码 */}
    );
};

export default SearchPage;

解决方案 #

方案1：使用router.push的查询参数选项 #

避免手动拼接URL，改用router.push的第二个参数传递查询参数，让Next.js自动处理编码和路径解析：

const handleSubmit = (e) => {
    e.preventDefault();
    setIsSearchOpen(false);
    router.push('/search', {
        query: { query: inputRef.current?.value }
    });
};

方案2：使用表单原生action属性（App Router推荐） #

直接利用表单的action属性指向搜索页面，无需手动处理路由，Next.js会自动将表单数据转为查询参数传递，同时适配根路径和非根路径场景：

<form action="/search" className="relative w-full mx-40">
    <input name="query" className="w-full outline-none" ref={inputRef} />
    <button className="absolute right-0 bottom-0 h-4 w-4 bg-primary" type="submit" />
</form>

问题原因 #

手动拼接URL时，App Router的router.push对带/开头路径中的?解析可能存在异常，导致查询参数丢失。使用官方推荐的参数传递方式或表单原生行为，能避免这类路径解析问题。

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