如何在Next.js文件系统路由中复用子路由？

你计划把Vercel上的应用迁移到Next.js，之前用react-router能复用...graphRouter这种带嵌套的图表导航路由，但Next.js靠文件系统定义路由，不想创建一堆空的重复嵌套文件，你的简化路由结构如下：

/
└── entries/
    └── <entryId>/
        ├── ...graphRouter
        └── context/
            ├── iterator/
            │   └── ...graphRouter
            └── <variableId>/
                └── ...graphRouter

下面给你几个实用的解决方案：

方案1：动态路由 + 共享组件/布局 #

核心是把graphRouter的所有逻辑封装成共享组件，在需要的路由位置直接引入，不用重复建文件：

• 先在components/GraphRouter目录里实现完整的图表嵌套路由，比如layout.tsx、page.tsx，还有对应的子路由组件（比如view/page.tsx、edit/page.tsx这类原...graphRouter里的嵌套路由）。
• 在需要挂载图表路由的动态路由文件里，直接引入共享的布局或组件：
  比如app/entries/[entryId]/layout.tsx：

  import GraphRouterLayout from '@/components/GraphRouter/layout';
  
  export default function EntryLayout({ children }) {
    return (
      <div>
        {/* 这里放entry级别的公共内容 */}
        <GraphRouterLayout />
        {children} {/* 对应context分支的内容 */}
      </div>
    );
  }
  

  同理，app/entries/[entryId]/context/iterator/layout.tsx和app/entries/[entryId]/context/[variableId]/layout.tsx也直接引入GraphRouterLayout就行，不用重复写嵌套逻辑。

方案2：路由组 + 共享路由逻辑 #

用Next.js的路由组（括号包裹的目录）组织共享路由，不影响URL路径：

• 创建(graph-router)路由组，里面实现完整的...graphRouter结构：

  app/
  └── (graph-router)/
      ├── layout.tsx
      ├── page.tsx
      └── [graphSubRoute]/
          └── page.tsx
  

• 在需要复用的位置，要么直接引入该路由组的组件，要么用next/navigation的路由跳转逻辑，把图表相关请求转到共享路由组处理。

方案3：自定义路由映射（App Router适用） #

用middleware.ts做路由重写，把所有匹配图表路由模式的请求转到共享的图表路由：

• 写middleware.ts定义匹配规则，把符合路径的请求重写到共享路由：

  // middleware.ts
  import { NextResponse } from 'next/server';
  import type { NextRequest } from 'next/server';
  
  export function middleware(request: NextRequest) {
    const url = request.nextUrl;
    // 匹配所有需要复用graphRouter的路径
    if (url.pathname.match(/^\/entries\/[^\/]+\/(context\/(iterator|[^\/]+)\/)?graph\//)) {
      // 重写路径到共享的graph路由
      const newPathname = url.pathname.replace(/^\/entries\/[^\/]+\/(context\/(iterator|[^\/]+)\/)?/, '');
      return NextResponse.rewrite(new URL(newPathname, request.url));
    }
    return NextResponse.next();
  }
  
  export const config = {
    matcher: ['/entries/:entryId/graph/:path*', '/entries/:entryId/context/iterator/graph/:path*', '/entries/:entryId/context/:variableId/graph/:path*'],
  };
  

• 然后在app/graph目录下实现完整的图表嵌套路由，所有匹配的请求都会被转发到这里处理，不用在多个位置重复建路由文件。

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