404 关于 Next.js 14 中嵌套路由的并行路由的硬导航

Question

我正在 Next.js 14 中使用并行路由实现选项卡组，并面临一个问题：仅在硬导航到

/gnb/mypage/tab1

时才会出现 404 页面。选项卡及其导航在初始渲染以及在选项卡之间单击时完美运行。但是，通过硬导航（例如在浏览器中输入 URL 或刷新页面）直接访问

/gnb/mypage/tab1

会导致 404 错误。以下是我的目录结构和相关代码片段：

目录结构：

./src/app/gnb
├── layout.tsx
├── mypage
│   ├── @myactive
│   │   └── page.tsx
│   ├── @mysubscribe
│   │   └── page.tsx
│   ├── @tabs
│   │   ├── default.tsx
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── tab1
│   │   │   ├── default.tsx
│   │   │   └── page.tsx
│   │   └── tab2
│   │       ├── default.tsx
│   │       └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
└── page.tsx

相关代码片段：

src/app/gnb/mypage/layout.tsx：

function Layout({
  children,
  tabs,
  myactive,
  mysubscribe,
}: {
  children: React.ReactNode;
  tabs: React.ReactNode;
  myactive: React.ReactNode;
  mysubscribe: React.ReactNode;
}) {
  return (
    <div>
      <div>{children}</div>
      <br />
      <div>{tabs}</div>
      <br />
      <div>{myactive}</div>
      <div>{mysubscribe}</div>
    </div>
  );
}

src/app/gnb/mypage/@tabs/layout.tsx：

import Link from 'next/link';

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <nav>
        <Link href="/gnb/mypage/tab1">TabOne </Link>
        <Link href="/gnb/mypage/tab2">TabTwo</Link>
      </nav>
      <div>{children}</div>
    </div>
  );
}

export default Layout;

我已将

default.tsx

文件包含在

tab1

下的

tab2

和

@tabs

目录中以处理默认渲染。尽管进行了此设置，直接访问

/gnb/mypage/tab1

URL 仍会导致 404 页面。

有人在 Next.js 14 中遇到过类似的并行路由问题吗？或者有人能找出可能导致此问题的原因吗？任何见解或建议将不胜感激。

Answer 1

如何

将default.tsx添加到

src/app/gnb/@myactive

，

src/app/gnb@mysubscribe

将隐藏404页面。

为什么

/gnb/mypage/tab1/page.tsx 使用 src/app/gnb/mypage/layout.tsx，因此它将加载 myactive slot 和 mysubscribe slot。当nextjs硬硬导航页面无法匹配并行路由时，就会丢失。