Next.js路由跳转重复拼接目录触发404错误的解决方法

API 探路者

2026-8-27

问题根因

路径重复拼接触发404的核心原因是跳转时使用了不带前导斜杠的相对路径：

在根路径/（首页）下触发跳转时，相对路径search/${searchTerm}会被拼接为/search/${searchTerm}，符合跳转预期
在已处于/search/xxx搜索结果页时，相对路径会基于当前所在路径层级做拼接，最终生成/search/search/${query}的错误路径，直接触发404响应

你当前编写的表单输入框值绑定、提交监听逻辑没有问题，故障点完全出在路由跳转的路径声明上。

修复方案

快速修复

给pathname值加上前导斜杠/，将路径声明为站点根路径下的绝对路径，路由跳转时就不会基于当前页面路径做相对拼接，直接解决重复片段问题：

const handleSubmit = (e) => {
  e.preventDefault();
  router.push({
    // 路径开头加/，声明为绝对路径
    pathname: `/search/${searchTerm}`,
  });

  setSearchTerm('');
};

规范写法（推荐）

不要手动硬拼接动态路由段、查询参数字符串，使用路由对象自带的参数传递能力，自动处理特殊字符转义，避免搜索词包含/、?、&等特殊字符时出现路径解析异常：

如果你的搜索页路由是动态段结构/search/[keyword]，对应写法：

const handleSubmit = (e) => {
  e.preventDefault();
  router.push({
    pathname: '/search/[keyword]',
    query: { keyword: searchTerm }
  });
  setSearchTerm('');
};

如果你的搜索页是通过query参数传递搜索词（路径格式为/search?keyword=xxx），对应写法：

const handleSubmit = (e) => {
  e.preventDefault();
  router.push({
    pathname: '/search',
    query: { keyword: searchTerm }
  });
  setSearchTerm('');
};

开发建议