Next.js嵌套路由问题：如何避免嵌套目录实现/admin/login路由访问

问题原因 #

Next.js App Router采用目录-文件映射的路由规则：路由路径对应目录结构，每个路由段的页面入口必须是对应目录下的page.tsx文件。直接在app/[locale]/admin/下创建login.tsx不会被识别为/admin/login的路由，因为它不符合“目录+page.tsx”的匹配规则。

可行解决方案 #

方案一：动态路由+集中式路由分发 #

通过将admin设为动态路由段，在单个page.tsx中根据路由参数渲染对应组件，避免创建大量子目录：

1. 创建目录结构：

app/
  [locale]/
    [adminRoute]/
      page.tsx
      components/
        Login.tsx
        // 其他admin子路由组件

2. [adminRoute]/page.tsx代码：

import '../globals.scss'
import React from "react";
import { useParams } from 'next/navigation';
import Login from './components/Login';

export default function AdminPage() {
  const { adminRoute } = useParams() as { adminRoute: string };

  // 根据路由参数分发组件
  switch (adminRoute) {
    case 'login':
      return <Login />;
    // 可添加更多admin子路由的分支
    default:
      return <div>Admin Home</div>;
  }
}

3. components/Login.tsx代码（复用你的原代码）：

import React from "react";

export default function Login() {
  return (
    <>
      Login Code
    </>
  );
}

这样访问/admin/login时，adminRoute参数为login，自动渲染Login组件，无需嵌套login/page.tsx目录。

方案二：路由组整理同类路由 #

如果需要将admin下的子路由归类，但不想路由路径中出现分类名称，可以使用路由组（用括号包裹目录名）：

创建目录结构：

app/
  [locale]/
    admin/
      (auth)/
        login/
          page.tsx
        register/
          page.tsx
      page.tsx // admin首页

路由组(auth)不会出现在最终路由中，(auth)/login/page.tsx对应的路由依然是/admin/login，同时可以将所有认证相关的路由集中在(auth)目录下，避免根admin目录过于杂乱。

注意事项 #

• 方案一适合路由逻辑简单、子路由数量不多的场景，代码集中管理但需注意避免单个page.tsx过于臃肿；
• 方案二保留了App Router的原生路由机制，适合子路由较多、需要分类管理的场景，目录结构更清晰。

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