NextJS路径中间加搜索参数路由异常问题排查

为什么没命中[type1Code]的page.tsx？ #

• URL语法错误：?是查询参数的起始标记，一旦出现?，后续所有内容都会被识别为查询参数，不再属于路径的一部分。你当前跳转后的URLpatients/[patientId]/forms/type1?param1=123/123code，实际有效路径是patients/[patientId]/forms/type1，自然匹配不到type1/[type1Code]下的页面。
• Next.js路由匹配规则：App Router是基于文件路径匹配页面的，只有?之前的路径段会参与路由匹配，查询参数不影响页面路由的命中。

修正方案 #

调整handleOnChange的路由拼接逻辑，先把表单编码（value）加到路径末尾，再追加查询参数：

const handleOnChange = (value: string) => {
  if (!formCodeId) {
    // 先拼接基础路径：原路径 + 表单编码
    let targetUrl = `${path}/${value}`;
    // 若存在查询参数，再追加到路径后
    if (searchParams.toString()) {
      targetUrl += `?${searchParams.toString()}`;
    }
    return router.push(targetUrl);
  }
  router.push(value);
};

修正后跳转的URL会变为patients/[patientId]/forms/type1/123code?param1=123，这样就能正确命中[type1Code]目录下的page.tsx了。

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