Next.js路由组中动态路由[id].tsx报404的解决方法咨询

核心原因 #

Next.js的路由组（带括号的目录(mygroup)）仅用于代码组织，不会出现在实际URL路径中。当文件放在(mygroup)/test/[id].tsx时，对应的访问URL依然是/test/[具体ID值]，而非/(mygroup)/test/[具体ID值]——错误的URL访问才会导致404。

修复步骤 #

• 确保访问的URL正确：直接访问/test/123（把123换成你的实际ID），不要在URL中包含(mygroup)。
• 开发环境下重启Next.js服务并清除浏览器缓存：路由结构变更后，缓存可能导致路由匹配异常，重启和清缓存能解决这类问题。
• 检查路由冲突：确认项目中没有其他同路径的路由文件（比如原test/[id].tsx是否未删除），避免路由规则冲突导致匹配失败。
• 优化动态参数获取（可选）：如果组件中id显示异常，可在组件中等待路由就绪后再获取参数，示例代码调整如下：

"use client";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

const Post = () => {
  const router = useRouter();
  const [postId, setPostId] = useState<string | undefined>();

  useEffect(() => {
    if (router.isReady) {
      setPostId(router.query.id as string);
    }
  }, [router.isReady, router.query.id]);

  return <p>Post: {postId}</p>;
};

export default Post;

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