Next.js中如何无需复制文件让/app/page.tsx作为分组路由的默认页面？

嘿，我完全懂你不想复制粘贴代码的心情——重复代码不仅维护麻烦，还容易出问题。你现在的情况是，根目录的/app/page.tsx没法直接作为(beforeSignup)分组路由的默认页面，而且只有把代码复制到/app/(beforeSignup)/default.tsx后，拦截路由的模态框才会生效对吧？别担心，有几种优雅的解决办法，不用复制代码就能搞定：

方法1：直接导入复用根页面组件 #

这是最简单快速的方式，不用写任何重复代码。你只需要在/app/(beforeSignup)/default.tsx里导入根目录的Page组件，然后直接导出它就行：

// /app/(beforeSignup)/default.tsx
// 用相对路径导入根页面组件
import Page from '../../page';

// 直接导出根页面组件作为分组的默认页面
export default Page;

这样一来，分组路由的默认页面就和根页面完全同步了——以后根页面有任何修改，分组的默认页面也会跟着更新，完全不用手动复制粘贴。

方法2：用路由别名优化导入路径（可选） #

如果项目结构比较深，相对路径写起来麻烦，你可以在tsconfig.json（或jsconfig.json）里配置路由别名，让导入更简洁：
打开项目根目录的tsconfig.json，在compilerOptions里添加baseUrl和paths：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["app/*"]
    }
  }
}

之后/app/(beforeSignup)/default.tsx里的导入就可以写成：

import Page from '@/page';

export default Page;

这种方式在大型项目里会更方便，不用纠结相对路径的层级。

方法3：抽离共享组件（更适合长期维护） #

如果以后你可能需要给根页面或者分组默认页面添加不同的额外内容，建议把核心业务逻辑抽成一个独立的共享组件，这样灵活性更高：

1. 先在/app/components目录下创建一个MainContent.tsx文件，把根页面的核心逻辑移进去（注意加上'use client'，因为useRouter是客户端钩子）：

// /app/components/MainContent.tsx
'use client';
import { useRouter } from 'next/navigation';
// 替换成你实际使用的Button组件路径
import Button from './Button';

export default function MainContent() {
    const router = useRouter();

    const openSignupModal = () => router.push('/signup');

    // todo 회원 인증후 라우팅

    return (
        <div className={'flex flex-col'}>
            main
            <Button 
                onClick={openSignupModal} 
                className={'bg-blue-300/30 hover:cursor-pointer'}
            >
                modal bttn
            </Button>
        </div>
    );
}

2. 然后修改根目录的/app/page.tsx，导入这个共享组件：

// /app/page.tsx
import MainContent from './components/MainContent';

export default function Page() {
    return <MainContent />;
}

3. 最后在/app/(beforeSignup)/default.tsx里也导入这个共享组件：

// /app/(beforeSignup)/default.tsx
import MainContent from '../../components/MainContent';

export default function DefaultPage() {
    return <MainContent />;
}

这种方式的好处是，以后如果根页面需要加专属内容，或者分组默认页面需要加额外布局，直接在各自的文件里修改就行，不会影响到对方，扩展性拉满。

为什么原来的根页面不生效？ #

顺便说一下你之前遇到的问题：根目录的/app/page.tsx不属于(beforeSignup)路由组，所以它不会使用这个分组的布局，也不会触发分组内的平行/拦截路由（比如你的@modal/(.)signup）。而把代码复制到分组的default.tsx后，页面就属于这个路由组了，所以拦截路由的模态框就正常工作了——上面的几种方法本质上都是让分组的默认页面复用根页面的逻辑，同时保留路由组的上下文。

备注：内容来源于stack exchange，提问作者정제로