NextJS 14跳转至搜索页时URL无法添加参数问题求助

问题分析 #

你的搜索页路由位于app/[lang]/(home)/search/page.tsx，属于带lang动态参数的嵌套路由。但你调用router.push('/search?term=${searchTerm}')时，使用的是根路径的绝对地址，没有包含当前的lang参数，导致NextJS自动重定向到正确路由路径时丢失了查询参数；另外按钮type="submit"可能触发默认提交行为，干扰路由跳转逻辑。

解决方案 #

1. 构造包含动态lang参数的正确路径 #

先通过useParams获取当前页面的lang动态参数，再拼接完整的跳转路径：

import { useRouter, useParams } from "next/navigation";

const router = useRouter();
const params = useParams(); // 获取当前路由的动态参数，包含lang字段

const handleSearch = () => {
  router.push(`/${params.lang}/search?term=${searchTerm}`);
};

2. 修正按钮类型避免默认提交行为 #

将按钮的type从submit改为button，防止触发不必要的默认提交逻辑：

<button
  type="button"
  className="absolute right-0 top-0 mt-4 mr-4"
>
  <SearchIcon onClick={() => handleSearch()} />
</button>

3. 可选：用相对路径简化跳转 #

如果Navbar.tsx本身就在[lang]/(home)的路由层级下，可直接使用相对路径跳转，无需手动拼接lang参数：

const handleSearch = () => {
  router.push(`search?term=${searchTerm}`);
};

验证效果 #

修改后点击搜索按钮，将正确跳转到http://localhost:3000/en/search?term=something（en为当前页面的lang参数），URL参数会被正常携带。

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