Next.js 13并行路由失效访问404，寻求解决方法

核心问题 #

你误解了并行路由的访问逻辑：@create_recipe 是并行路由的槽位名称，并非独立的路由路径，直接访问 /create_recipe 自然会返回404。并行路由的作用是在同一页面内同时渲染多个路由分支，而非创建新的独立路由。

正确实现方式 #

方式1：用搜索参数激活并行路由（弹窗场景常用） #

在主页面添加触发按钮，通过搜索参数控制并行路由的显示：

// app/page.jsx
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>主页</h1>
      <Link href="/?create_recipe=open">打开创建食谱弹窗</Link>
    </div>
  );
}

修改根布局，根据搜索参数决定是否渲染并行路由内容：

// app/layout.jsx
import { useSearchParams } from 'next/navigation';

export default function RootLayout({ children, create_recipe }) {
  const searchParams = useSearchParams();
  const showModal = searchParams.get('create_recipe') === 'open';

  return (
    <ClerkProvider>
      <TanstackProvider>
        <html lang='en'>
          <body>
            <div className='absolute p-2'>
              <UserButton afterSignOutUrl='/' />
            </div>
            {children}
            {showModal && create_recipe}
          </body>
        </html>
      </TanstackProvider>
    </ClerkProvider>
  );
}

方式2：用拦截路由实现独立路径的弹窗 #

如果需要通过 /create_recipe 直接访问弹窗，应该使用拦截路由（而非并行路由），调整文件结构如下：

app
├── (main)
│   ├── layout.jsx
│   ├── page.jsx
├── create_recipe
│   ├── @modal
│   │   └── page.jsx
│   ├── default.jsx
│   └── page.jsx

这种结构会让访问 /create_recipe 时，在主页面上方渲染弹窗内容，同时保留主页面背景。

关于实验性标志 #

Next.js 13.4及以上版本中，App Router（包括并行路由、拦截路由）已处于稳定状态，无需开启任何实验性标志。请确保你的Next.js版本 ≥13.4。

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