Next.js路由拦截模态框失效问题求助

我正在参考指南在Next.js测试应用中实现路由拦截，使用Next.js App Router，已成功完成并行路由的部署，目标是实现路由拦截模态框。

目录结构对比 #

未实现路由拦截的正常应用目录 #

• app/
  • @modal/
    • create/
      • page.tsx
    • [...catchAll]/
      • page.tsx
    • default.tsx
  • api/
    • notes/
  • create/
    • page.tsx
  • lib/
  • ui/
  • page.tsx
  • layout.tsx

尝试实现路由拦截后的异常应用目录 #

• app/
  • @modal/
    • (.)create/
      • page.tsx
    • [...catchAll]/
      • page.tsx
    • default.tsx
  • api/
    • notes/
  • create/
    • page.tsx
  • lib/
  • ui/
  • page.tsx
  • layout.tsx

两次部署的唯一改动是将/app/@modal/create修改为/app/@modal/(.)create，经调试判断问题根源在此。

关键代码片段 #

/app/layout.tsx #

import type { Metadata } from 'next';
import './globals.css';
import { Providers } from './providers';
import { lusitana } from './ui/fonts';
import { Toaster } from 'react-hot-toast';
import { ThemeSwitcher } from './ui/theme-switch';


export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout(props: Readonly<{
  children: React.ReactNode;
  modal: React.ReactNode;
}>) {
  return (
    <html lang="en" className="max-h-full h-full">
      <body className={`${lusitana.className} antialiased max-h-full h-full`}>
        <Providers>
          <div className="max-h-full h-full">
            <Toaster
              toastOptions={{
                duration: 4000,
                position: 'top-right',
              }}
            />
            <ThemeSwitcher className="absolute t-0 l-0 m-3" />
            <div className="text-center">{props.children}</div>
            <div className="text-center">{props.modal}</div>
          </div>
        </Providers>
      </body>
    </html>
  );
}

/app/create/page.tsx #

export default function Page() {
  return 'create main';
}

/app/@modal/(.)create/page.tsx（或原/app/@modal/create/page.tsx） #

export default function Page() {
  return (
    'create modal'
  );
}

可按需提供更多信息。

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