本文主要讨论的在 NextJS 当中一些相关路由的设置。
简要介绍
- parallel 路由 呈现或者有条件的同一布局中的多个页面
- intercept 路由 当前布局中应用程序的其他部分加载路由。(在不让用户切换到上下文时加载路由部分)
parallel 路由
如何使用
- 注册
- 新建一个@开头的文件夹,并创建 page.jsx文件
- 使用
- 在 layout文件下的导出的函数入参传入相关的文件名
export default function Layout({ children, team, analytics}{}
如在这个文件中,我们就导入了三个路由文件
特殊的 children 路由
children prop 是一个不需要映射到文档夹的隐式插槽。
这意味着 app/page.js 等同于 app/@children/page.js。
如果在@文件夹下创建一个新文件会发生什么
这个新建的文件夹会作为 url 段进行匹配。 也就是说@team/setting/page.jsx 文件的内容只有在匹配了setting这个路由之后才会显示。
这反映了我们最开始介绍的 parallel 是有条件的呈现相关页面
如果进入setting 页面强刷新了怎么办?
因为我们只在 @team 文件夹下面定义了 setting 的路有段。 初次进入的时候一般不会触发强刷新,也就是 children 和 Analysis 页面不会改变。 但如果用户按了 F5 那么意味着所有页面会全部刷新,而这两个路由下是不存在相关对应的文件的。
所以我们要设置一个deafult.jsx 文件,来表示 url 不匹配的时候出现的页面。 (可以直接导入 page.js的内容)
todoing。。。