Nextjs+Nodejs重置密码链接点击出现404 Not Found问题求助

你的问题核心是Next.js的路由机制和React单页应用存在差异：React依赖客户端路由配置匹配路径，而Next.js基于文件系统路由，必须对应正确的页面文件结构才能正常访问。

原因分析 #

后端生成的链接格式为http://localhost:3000/UpdatePassword/${token}，其中token是路径的动态参数，但你的Next.js项目没有创建匹配该路径的路由文件，因此返回404。而React项目通过客户端路由（如React Router）配置/UpdatePassword/:token即可匹配，所以能正常工作。

解决方案 #

方案1：调整Next.js路由文件结构（保留原有链接格式） #

如果想继续使用/UpdatePassword/${token}的链接形式，需按照Next.js动态路由规则创建页面文件：

• Pages Router（Next.js 12及以下/13+兼容模式）：
  在pages目录下创建UpdatePassword文件夹，内部新建[token].jsx文件，将现有UpdatePassword.jsx的代码迁移到该文件中。目录结构如下：

  pages/
    UpdatePassword/
      [token].jsx
  

  此时访问/UpdatePassword/xxx会自动匹配该页面，router.query.token也能正常获取到token值。

• App Router（Next.js 13+）：
  在app目录下创建UpdatePassword/[token]文件夹，内部新建page.jsx文件，迁移原有代码。目录结构如下：

  app/
    UpdatePassword/
      [token]/
        page.jsx
  

  注意：App Router中使用useState等客户端钩子时，需要在组件顶部添加'use client'指令。

方案2：修改后端链接为Query参数（无需调整前端文件结构） #

若不想改动前端文件结构，可将后端生成的链接改为Query参数形式：

// Node.js后端代码修改context中的url
context: {
  url: `http://localhost:3000/UpdatePassword?token=${token}`
}

修改后链接变为http://localhost:3000/UpdatePassword?token=xxx，只要UpdatePassword.jsx（或App Router下的app/UpdatePassword/page.jsx）放在正确的路由目录中，即可正常访问，且现有const {token} = router.query代码无需修改。

额外检查项 #

• 确保页面文件放在Next.js规定的路由目录下（Pages Router为pages/，App Router为app/），不能存放在其他自定义目录中。
• 若使用App Router，需确认组件是否符合React Server Components规范（如客户端交互逻辑需加'use client'）。

内容的提问来源于stack exchange，提问作者Josip Marić