nextjs中的平行路由 Parallel Routing

1. 什么是平行路由

并行布线允许您同时或有条件地在同一布局中呈现一个或多个页面。对于应用程序的高度动态部分，如社交网站上的仪表板和提要，可以使用并行路由来实现复杂的路由模式。

考虑下面的路由结构：

app
├── @team
│   ├── [...catchAll]
│   │   ├── page.js
│   ├── settings
│   │   ├── page.js
│   ├── default.js
│   ├── page.js
├── settings
│   ├── layout.js
│   ├── page.js
├── login
│   ├── page.js
├── layout.js
├── page.js

@team则是一个平行路由，但实际不匹配任何路由，它只是一个slot

2. 解释

@team的出口在layout.js

// layout.js
export default function RootLayout(props) {
const {children, team} = props;
return (
  <html lang="zh">
    <body>
      { children }
      { team }
    </body>
  </html>
);
}

当访问/时，{team}的内容是@team/page.js
当访问/settings时，{team}的内容是@team/settings/page.js ,因为匹配到了settings。
当访问/login时，未匹配到任何路径，{team}的内容是@team/[...catchAll]/page.js。如果没有[...catchAll]，则会是@team/defalut.js。

值得注意的是, 官网中还有这两条规则

Navigation

On navigation, Next.js will render the slot's previously active state, even if it doesn't match the current URL.

Reload

On reload, Next.js will first try to render the unmatched slot's default.js file. If that's not available, a 404 gets rendered.

The 404 for unmatched routes helps ensure that you don't accidentally render a route that shouldn't be parallel rendered.

简单点来说，如果是正常导航，则会保留之前的slot,如果是刷新，则只会保留匹配路径的slot