Next.js router跳转异常：admin路径重复问题排查

问题场景 #

我在Next.js应用中实现基于角色的认证功能，现有admin和user两种角色，页面结构如下：

┣ 📂admin
 ┃ ┣ 📜edit.tsx
 ┃ ┗ 📜profile.tsx
 ┣ 📂user
 ┃ ┣ 📜edit.tsx
 ┃ ┗ 📜profile.tsx
 ┣ 📜_app.tsx
 ┣ 📜index.tsx

同时定义了路由枚举：

enum ADMIN_ROUTES {
  PROFILE = 'admin/profile',
  EDIT = 'admin/edit',
}

调用router.push(ADMIN_ROUTES.PROFILE)或router.push(ADMIN_ROUTES.EDIT)时，实际跳转路径变成了admin/admin/profile或admin/admin/edit，而非预期的admin/profile或admin/edit。

问题原因 #

你定义的路由路径是相对路径，当你已经处于admin目录下的页面（比如admin/edit或admin/profile）调用router.push时，Next.js会以当前页面的路径为基准，拼接你传入的相对路径，最终导致路径重复叠加。

解决办法 #

给路由枚举的路径加上根路径前缀 /，将相对路径改为绝对路径即可：

enum ADMIN_ROUTES {
  PROFILE = '/admin/profile',
  EDIT = '/admin/edit',
}

修改后，无论当前处于哪个页面，router.push都会从网站根目录开始定位目标路径，不会再出现路径重复的问题。

补充：子路径部署场景适配 #

如果你的应用部署在域名子路径下（比如https://example.com/my-app/），可以通过环境变量动态拼接根路径，避免硬编码：

const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';

enum ADMIN_ROUTES {
  PROFILE = `${basePath}/admin/profile`,
  EDIT = `${basePath}/admin/edit`,
}

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