平行路由

平行路由指的是在同一布局layout.tsx中，可以同时渲染多个页面，例如team，analytics等，这个东西跟vue的router-view类似。

平行路由

基本用法

平行路由的使用方法就是通过@ + 文件夹名来定义，例如@team，@analytics等，名字可以自定义。

WARNING

平行路由也不会影响URL路径。

平行路由

定义完成之后，我们就可以在layout.tsx中使用team和analytics来渲染对应的页面，他会自动注入layout的props里面

WARNING

注意：例子中我们使用了解构的语法，这里面的名称team,analytics需跟文件夹名称一致。

独立路由

当我们使用了平行路由之后，我们为其单独定义loading,error,等组件使其拥有独立加载和错误处理的能力。

平行路由

default.tsx

首先我们先认识一下子导航，每一个平行路由下面还可以接着创建对应的路由，例如@team下面可以接着创建@team/setting，@team/user等。

那我们的目录结构就是：

txt

├── @team
│   ├── page.tsx
│   ├── setting
│   │   └── page.tsx
└── @analytics
│    └── page.tsx
└── layout.tsx   
└── page.tsx

然后我们使用Link组件跳转子导航setting页面

tsx

import Link from "next/link";

export default function RootLayout({
  children,
  analytics,
  team,
}: Readonly<{
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}>) {
  return (
    <html lang="zh-cn">
      <body>
        {children}
        {analytics}
        {team}
        <Link className="border p-2 bg-gray-800 rounded-lg text-white" href={"/setting"}>
          @team/setting
        </Link>
      </body>
    </html>
  );
}

观察上图我们发现，子导航使用Link组件跳转setting页面时，是没有问题的，但是我们在跳转之后刷新页面，就出现404了，这是怎么回事?

当使用软导航Link组件跳转子页面的时候，这时候@analytics 和 children 依然保持活跃，所以他只会替代@team里面的内容。
而当我们使用硬导航浏览器页面刷新,此时@analytics 和 children 已经失活，因为它的底层原理其实是同时匹配@team和@analytics，children 目录下面的setting 页面，但是只有@team 有这个页面，其他两个没有，所以导致404。

解决方案：使用default.tsx来进行兜底，确保不会404

@analytics/default.tsx 定义default.tsx文件
app/default.tsx 定义default.tsx文件

平行路由 ​

基本用法 ​

独立路由 ​

default.tsx ​

平行路由

基本用法

独立路由

default.tsx