Next.js动态页面与子页面Link跳转全页重载问题求助

核心问题：路由路径不匹配 #

你的pages目录下的动态文件夹是[Formation]，但在Link的href属性里写的是[Formations]/[SubPage]（多了个字母s）。Next.js处理客户端路由时，会根据href匹配pages目录的文件结构，当这个路径找不到对应页面文件时，不会拦截浏览器默认跳转行为，直接触发全页重载，导致_app.js的布局重新加载。

对比测试用例的差异 #

你测试的<Link href="ReactJS/Udemy">Udemy</Link>能正常无刷新跳转，是因为这个路径能直接匹配到对应的路由规则（静态页面或动态路由匹配），Next.js识别到这是客户端可处理的路由，会阻止浏览器默认跳转，走客户端路由切换逻辑。

关于标签外观一致的说明 #

虽然两个Link生成的<a>标签看起来一样，但Next.js会给合法路由的Link绑定点击事件拦截逻辑。只有当href对应的路由在客户端路由表中存在时，才会触发无刷新跳转；否则会复用浏览器原生跳转行为，导致全页重载。

修复建议 #

• 修正href的路径拼写，和pages目录的文件夹名保持一致：

  <Link href={`/[Formation]/[SubPage]`} as={`${Title}/${item}`}>
    {item}
  </Link>
  

• 更简洁的写法（无需手动指定as，Next.js会自动匹配动态路由）：

  <Link href={`/${Title}/${item}`}>
    {item}
  </Link>
  

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