Next.js动态路由使用router.push跳转页面失败报错排查

你的报错核心是：动态路由组件中存在未传入必要query参数的router.push调用，错误信息里的/student/worksheets/[grade]/[subject]说明有代码直接使用了动态路由的路径模板字符串，却没提供grade和subject参数——这和你跳转到/login的那个router.push本身无关，你说在worksheets.js里调用router.push("/login")正常，大概率是动态路由组件里的其他router.push写法出了问题。

排查与修复步骤 #

• 先检查动态路由组件worksheets/[grade]/[subject].js里所有的router.push调用：
  • 如果是要跳转到/login，必须确保用绝对路径：router.push("/login")，不能用相对路径（比如router.push("login")，这会基于当前路径拼接成/student/worksheets/[grade]/login，但这不是引发你当前报错的原因）。
  • 如果是要跳转到其他动态路由页面，必须用对象形式传入query参数，和你Link组件的写法一致：

    router.push({
      pathname: "/student/worksheets/[grade]/[subject]", // 路径前缀要和实际路由结构匹配
      query: { grade: "目标年级值", subject: "目标科目值" }
    })
    

• 另外，确认路由文件结构和路径的匹配性：如果错误里的路径是/student/worksheets/[grade]/[subject]，那你的路由文件应该放在pages/student/worksheets/[grade]/[subject].js；如果文件直接在pages/worksheets/[grade]/[subject].js，那pathname要写成"/worksheets/[grade]/[subject]"。

关键提醒 #

不要直接把动态路由的模板字符串（比如"/student/worksheets/[grade]/[subject]"）作为href传给router.push，Next.js会尝试对这个路径做参数插值，缺少必要参数就会抛出你遇到的错误。

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