`,`<meta>`等等，都不需要，NextJs 提供了函数去动态添加 * 我们可以使用**路由组**(后面会详细讲到)去创建多个不同的根布局，前提是根据你的需求来使用。 #### `page.tsx` `page.tsx`文件用于渲染对应路由的正文内容，它接受两个参数`params`,`searchParams`，我们直接来看官方的例子 `params`例子 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ca7ff706e324f0caee9825f4dcc89a1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1670\&h=596\&s=79531\&e=png\&b=fbfbfb) `searchParams`例子 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af5ebf5f25ae4809b0ce1285d83b700f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1500\&h=586\&s=51679\&e=png\&b=fdfdfd) #### `loading.tsx` `loading.tsx`文件配合着`Suspend`一起使用，会立即创建出一个加载的状态，我们可以用它来做骨架屏之类的效果 #### `not-found.tsx` `not-found.tsx`文件用于捕获`notFound()`或者是当你访问了一个不存在的路由时，会默认返回该文件的内容 ⚠️ 注意注意创建该文件，得放到`/app`下面，否则无法覆盖 NextJs 默认自带的`not-found.tsx`界面。 #### `error.tsx` `error.tsx`文件捕获客户端组件和服务端组件抛出的错误，会作为一个占位显示。看一个官方的例子 ```tsx "use client"; // error.tsx 必须是一个客户端组件 import { useEffect } from "react"; export default function Error({ error, reset, }: { error: Error & { digest?: string }; reset: () => void; }) { useEffect(() => { // 上报错误 console.error(error); }, [error]); return ( <div> <h2>Something went wrong!</h2> <button onClick={ // 尝试重新恢复到未出错的状态 () => reset() } > Try again </button> </div> ); } ``` 我们来看看比较重要的几点 * 首先，`error.tsx` 必须是一个客户端组件 * `digest`代表的是一个`hash`值，它可以用来在服务端日志中匹配相关的错误 * `reset`是一个重置错误边界的函数，它会重新渲染错误边界的内容，如果成功，该组件被正确渲染的内容所替代 * `error.tsx`不会捕获同层级`layout.tsx`里面的内容，只能捕获在它下级的`layout.tsx` 那我们如何捕获`root layout`的错误呢？使用`global-error.tsx` #### `global-error.tsx` 一种用于捕获根布局`root layout`错误的文件 #### `route.ts` `route.ts`允许你使用`Web Request`和`Web Response`为一个给定的路由创建自定义的请求。具体支持的`Http methods` ```ts export async function GET(request: Request) {} export async function HEAD(request: Request) {} export async function POST(request: Request) {} export async function PUT(request: Request) {} export async function DELETE(request: Request) {} export async function PATCH(request: Request) {} export async function OPTIONS(request: Request) {} ``` 属性介绍：来看看一个官方的例子 `app/dashboard/[team]/route.ts` ```ts type Params = { team: string; }; export async function GET(request: Request, context: { params: Params }) { const team = context.params.team; // '1' } ``` #### `template.tsx` `template.tsx`文件和`layout.tsx`文件有点相似。它可以包裹`children`，但是会被`layout.tsx`包裹。并且当使用了`template.tsx`并且用户在其中切换路由，子页面会被重新创建渲染，状态也不会被保存。 #### `default.tsx` `default.tsx`会搭配着**平行路由**一起使用，后面会详细讲到。 ### 3.1 嵌套路由在`src/app`目录下面，我们每创建一个目录，代表一个**路由段**，我们可以通过该路由段来访问对应的界面。接下来，我们来创建一个`/blog`嵌套路由，我们在`app`目录下，新建立一个文件夹，然后在文件夹下面创建`page.tsx`（注意：`page.tsx`的内容也就是作为你访问路由的内容） `src/app/blog/page.tsx`内容： ```tsx const Blog = () => { return <div>我的博客界面</div>; }; export default Blog; ``` 执行`pnpm dev`命令后，在`localhost:3000`端口，访问`/blog`路由，我们可以看到如下的界面： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c65df588f4548b6a7393c90b814076b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=638\&h=152\&s=18584\&e=png\&b=f2f1e1) 刚刚我们主目录下面建立了一个嵌套路由，当然我们还可以在`blog`下面继续嵌套更多文件夹(路由)，用以创建更多、更深路由的界面 ### 3.2 动态路由 #### 3.2.1 创建基础的动态路由当我们需要根据实际需求中的 ID 去访问某个页面的详情时，这个时候，我们就需要使用的动态路由。例如，在这里，我要创建一个博客详情页面，我需要创建一个使用**中括号**包裹，在`/src/app/blog`目录下面，建立`[blogId]`目录，并且建立`[blogId]/page.tsx`页面，并且填入以下内容： ```tsx import React, { memo } from "react"; const BlogDetail = (props: { params: { blogId: string } }) => { return <div>博客ID: {props.params.blogId}</div>; }; export default BlogDetail; ``` 然后我们在`blog/page.tsx`添加路由跳转，以便跳转到博客详情页面，如下： ```tsx import Link from "next/link"; const BLOGS = [1, 2, 3, 4, 5]; const Blog = () => { return ( <div className="p-4"> <h1>我的博客界面</h1> <ul> {BLOGS.map((b) => ( <li key={b}> <Link href={`/blog/${b}`}>博客{b}</Link> </li> ))} </ul> </div> ); }; export default Blog; ``` 替换代码后，我们的博客页面添加了跳转到详情的入口： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06a7aa8f474a4c7e93c84d529493e895~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=660\&h=436\&s=32699\&e=png\&b=fefefe) 我们可以通过界面点击`博客1`等进入对应的详情界面： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65a6f57997fb4b4ab6ad9f18db7b3fd3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=624\&h=174\&s=16060\&e=png\&b=fdfdfd) 到这个时候我们就创建了一个基础的动态路由。 #### 3.2.2 匹配所有子路由我们还可以通过在方括号里面加省略号的方式，匹配更多路由，比如说，我在`blog`目录下面加入`[...slug]`文件夹，因为我们这里已经建立了`[blogId]`目录，所有这个目录只能够匹配出`/blog`路由下面所有除了一级路由以外的路由，举个例子： * `/blog/1` 这个路由会走到`[blogId]`目录下 * `/blog/1/2` 这个路由会走到`[...slug]`目录下我们先来看看刚刚创建的`[...slug]`下的文件内容，`[...slug]/page.tsx`： ```tsx import React, { memo } from "react"; const Others = (props: { params: { slug: string } }) => { return <div>其他: {JSON.stringify(props.params.slug)}</div>; }; export default Others; ``` 再来看看实际的情况： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fab672c6fed49a2b0bb496a7907e171~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=692\&h=186\&s=17493\&e=png\&b=fefefe) 这实际上就是走到了`[...slug]/page.tsx`内容下。这里我们还有一种**可选匹配所有子路由**，我们可以使用两个中括号来创建，`/blog/[[...slug]]/page.tsx`，它和上述的区别在于它可将`/blog`路由一起匹配。但是这里我们这里已经创建了`/blog/page.tsx`，所以这里会有冲突，nextjs 会提示报错。我们可以删除`/blog/page.tsx`，直接使用`/blog/[[...slug]]/page.tsx`匹配`blog`目录下面所有的路由。 ### 3.3 路由组当我们需要使用目录去组合、收纳一些有关联的路由这个时候我们可以使用**小括号**的形式包裹文件夹名字，例如`(folderName)`，并且它不会被声明为一个我们可以访问的路由，我们来举个例子，我想在`blog`目录同级再建立两个目录，一个是我喜欢的文章(`favorite-article`)，一个是我喜欢的视频(`favorite-video`)，如果我直接创建两个目录铺平，显得有点冗杂，这个时候我可建立一个路由组 `(favorite)`，然后在其目录下面再建立`article`、`video`目录如下 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c14f3f6531f541babf33d926ef35c540~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=408\&h=264\&s=15581\&e=png\&b=181818) 然后我们分别建立`page.tsx`，内容如下 `/(favorite)/article/page.tsx` ```tsx /** 最喜欢的文章 */ const Articles = () => { return <div>最喜欢的文章页面</div>; }; export default Articles; ``` `/(favorite)/video/page.tsx` ```tsx /** 最喜欢的视频 */ const Videos = () => { return <div>最喜欢的视频页面</div>; }; export default Videos; ``` 到这里，我们我们可以使用路由访问啦！我们分别访问，`/article`和`/video`试试： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7502f92234c94c7cac6cb9bb9081993b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=678\&h=158\&s=20244\&e=png\&b=f2f1e1) ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d908eda06c9415d896ac06bead501c0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=666\&h=176\&s=20778\&e=png\&b=f1f0e0) 当然，路由组还有一个强大的功能。我们可以根据不同的路由分组使用不同根布局(`root layout`)，这种情况适用于，不同的路由使用不同的布局方式。我们创建两个目录`(home)`，`(daily)`目录，然后将我们将`/app/layout.tsx`，`/app/page.tsx`都移动到`(home)`目录，把之前创建的`/app/blog`目录移动`(daily)`目录在下面，然后我们将`/(home)/layout.tsx`的内容复制，并且在`(daily)`和`(favorite)`目录下面分别创建`layout.tsx`： `/(daily)/layout.tsx`： ```tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "DAILY", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}>我是Daily根布局：{children}</body> </html> ); } ``` `/(favorite)/layout.tsx`： ```tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "FAVORITE", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}>我是Favorite根布局：{children}</body> </html> ); } ``` 我们来看看调整后的目录结构 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2ca6b9459c14ebd84f7fa9e7e02c65a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=448\&h=686\&s=57968\&e=png\&b=181818) 我们改造一下我们的首页： `(home)/page.tsx`： ```tsx import Link from "next/link"; export default function Home() { return ( <main> <h1>我的日常</h1> <ul> <li> <Link href={`/blog`}>博客</Link> </li> </ul> <h1>我的喜欢</h1> <ul> <li> <Link href={`/video`}>视频</Link> </li> <li> <Link href={`/article`}>文章</Link> </li> </ul> </main> ); } ``` 然后我们来看看具体的页面效果 * 首页`(home)`效果 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcec3dc028354614abd3e11fb44a8c97~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=584\&h=408\&s=33945\&e=png\&b=fdfdfd) * 日常`(daily)`效果 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be16f1efefba40f2901cd875f0c6603d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=794\&h=472\&s=41196\&e=png\&b=fefefe) * 我的喜欢`(favorite)`效果 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10cc5618b8bd4c98a436e307a4768fc4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=666\&h=202\&s=28350\&e=png\&b=fdfdfd) ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0995353478334211b8a1de7031f12103~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=634\&h=188\&s=28232\&e=png\&b=f3f2e2) 注意注意 ⚠️： * 当我们使用路由组并且想在其中使用单独的根布局`root layout`，我们也得把首页的`/app/layout.tsx`和`/app/page.tsx`也要移动到路由组里面，并且同级的路由组内，只能有一个`page.tsx`，不然 Nextjs 无法判断将哪个`page.tsx`作为首页页面。 * 统一层级路由组下面的目录名不能重名，例如，如果我在`(daily)`目录下面也创建一个`/(daily)/video`目录，这个时候会报错，Nextjs 无法判断使用哪个路由 * 使用多个根布局`root layout`会造成页面全量刷新 ### 3.4 私有目录刚刚我们谈到的**路由组**功能开发，其实就是为了更好的组织我们项目中目录、文件，我们刚才只是建立基本的路由文件`page.tsx`，但是实际开发中我们还会有通用组件、通用方法等等。这个时候，我们应该怎么去存放这些目录或者文件呢？ Nextjs App router 允许我们在路由目录下面建立文件，并且不被外界访问，他只会对客户端返回`page.tsx`或者`route.ts`，其他文件默认为私有内容，但是如果我们需要建立一个文件，文件名不能和 Nextjs 约定的文件名(如下图所示)重合，否则会报错。如果未来 Nextjs 新增一种约定和你之前定义的文件名重合，也会造成错误了。虽然但是这也不是什么大事儿。还是很推荐这种方式的。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7771f1717ee04ff39539b5b9a486fc5e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=656\&h=736\&s=59556\&e=png\&b=0b0b0b) 当然，如果你想建立一个私有的目录去存放一些公共的资源，有很多种方法，就看看自己约定的规范罢了。例如 * 我们可以直接在`/app`目录下面建立文件夹但是里面不放和 Nextjs 约定的文件名相同即可 * 在`/app`目录外建立文件夹，不会约束你的文件名(强烈推荐) * 在`/app`目录里面，使用下划线加目录名`_folderName`来建目录，这个也不会约束你的文件名我们选择第二种方式，来创建一些公共的目录，如下 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d42c6f1f6e48478fb4e583d1f763e90b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=454\&h=268\&s=14670\&e=png\&b=181818) ### 3.5 平行路由 & 路由拦截平行路由一般用于，当我们的网站页面，有多个模块(`dashboard`)或者可以根据条件选择性渲染某些模块时，我们可以使用平行路由来异步渲染这些模块提高我们页面的渲染性能。要创建平行路由，我们使用`插槽 slot`的形式，我们命名文件夹时使用`@folderName`的约定来创建一个`插槽`，当我们创建`插槽`之后，该`插槽`会以`props`的形式向下传递，我们可以在`/layout.tsx`里面直接获取到。我们来改造一下首页，创建`@daily`和`@favorite`插槽，如下： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb3ac45854064a7d99b771fc82abd267~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=356\&h=268\&s=25224\&e=png\&b=181818) 然后我们将之前首页的内容放到`@daily/page.tsx`和`@favorite/page.tsx`中 `@daily/page.tsx`： ```tsx import Link from "next/link"; const HomeDaily = () => { return ( <div> <h1>我的日常</h1> <ul> <li> <Link href={`/blog`}>博客</Link> </li> </ul> </div> ); }; export default HomeDaily; ``` `@favorite/page.tsx`： ```tsx import Link from "next/link"; const HomeFavorite = (props: any) => { return ( <div> <h1>我的喜欢</h1> <ul> <li> <Link href={`/video`}>视频</Link> </li> <li> <Link href={`/article`}>文章</Link> </li> </ul> </div> ); }; export default HomeFavorite; ``` 然后在`/app/(home)/layout.tsx`中我们使用`props`去接受`daily`和`favorite`这两个插槽，然后就完成使用平行路由改造首页。 ```tsx export default function RootLayout({ children, favorite, daily, }: Readonly<{ children: React.ReactNode; favorite: React.ReactNode; daily: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}> 我是Home Root布局： {children} {daily} {favorite} </body> </html> ); } ``` ⚠️ 注意： * `插槽`不属于路由段，所以它不会影响路由。例如我们在`@daily`下面建立`detail`目录，这个时候我们的路由是`/detail`而不是`/@daily/detail`。 * `children`其实也是一种插槽的，只不过是内部配置好的默认的插槽插槽还有很多的用法，我们来讲讲 #### 3.5.1 根据角色显示不同的插槽我们直接使用一下官方文档的例子，这里在`layout`里面，通过使用`checkUserRole`函数获取用户角色，然后选择`user`或者`admin`查插槽来渲染。 ```tsx import { checkUserRole } from "@/lib/auth"; export default function Layout({ user, admin, }: { user: React.ReactNode; admin: React.ReactNode; }) { const role = checkUserRole(); return <>{role === "admin" ? admin : user}</>; } ``` #### 3.5.2 加载独立的 Loaning 和 Loading Error 由于平行路由是独立加载的，所以我们可以使用独立的加载中状态`loading.tsx`和加载失败`error.tsx`来优化不同加载状态的处理，官方例子: ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/997515e237584b05a94a06000b29b5ce~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1600\&h=1218\&s=268322\&e=png\&b=1d1d1d) #### 3.5.3 活动状态和导航我们直接上例子，在`@favorite`文件夹下面新增一个`types`目录，路径为`/@favorite/types`，并且新增`page.tsx`: ```tsx /** 喜欢的分类 */ const FavoriteTypes = () => { return <div>喜欢的分类</div>; }; export default FavoriteTypes; ``` 然后在`/@favorite/page.tsx`里面新增喜欢分类的链接： ```tsx import Link from "next/link"; const HomeFavorite = (props: any) => { return ( <div> <h1>我的喜欢</h1> <ul> <li> <Link href={`/video`}>视频</Link> </li> <li> <Link href={`/article`}>文章</Link> </li> <li> <Link href={`/types`}>分类</Link> </li> </ul> </div> ); }; export default HomeFavorite; ``` 这时候，我们看主页是这样子的，多了一个分类： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8ec082c007a400497a15149c0ed7388~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=430\&h=394\&s=30755\&e=png\&b=fdfdfd) 我们点击这个分类，会发现，它直接使用`/@favorite/type/page.tsx`的内容覆盖掉当前插槽的内容，在这里 Nextjs 将它视为是一个`软导航`，Nextjs 会使用局部渲染，用插槽来将访问的路由内容渲染出来。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b2e9470d46c46fab4b3c81d87712748~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=382\&h=252\&s=23320\&e=png\&b=fcfcfc) 我们尝试刷新一下，发现插槽内容都显示`404`，这是因为当你重新加载整个页面，Nextjs 将它视为是一个`硬导航`，它无法判别当前插槽的状态，所以它会默认使用当前插槽的`default.tsx`内容渲染，如果没有，则会使用内置的`not-found.tsx`页面渲染。其实仔细想想，我们直接刷新浏览器之后，渲染`default.tsx`的内容，如果`default.tsx`的内容和`page.tsx`不同，就感觉有差异感。如果两个内容相同，那是不是代码又重复了。感觉这里有点奇怪～ #### 3.5.4 使用插槽完成一个`Tabs`标签页的功能完成插槽功能，我们只需要在`@favorite`目录下面新建一个`layout.tsx`文件，内容如下： ```tsx import Link from "next/link"; export default function Layout({ children }: { children: React.ReactNode }) { return ( <> <nav className="flex gap-2"> <Link href="/recommend-articles">推荐文章</Link> <Link href="/recommend-videos">推荐视频</Link> </nav> <div>{children}</div> </> ); } ``` 然后我们建立`recommend-articles`和`recommend-videos`目录，表示为推荐的文章和视频，内容如下： `recommend-articles/page.tsx` ```tsx const RecommendArticles = () => { return <div>我是推荐的文章</div>; }; export default RecommendArticles; ``` `recommend-videos/page.tsx` ```tsx const RecommendVideos = () => { return <div>我是推荐的视频</div>; }; export default RecommendVideos; ``` 我们可以看到如图所示，这个时候主页已经有了两个标签页，**推荐文章**和**推荐视频** ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/544d4498d3f1479cb623fd218eb72231~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=576\&h=592\&s=61031\&e=png\&b=fcf9f8) 当我点击其中一个时他会加载对应路由代码的内容，如下： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/714e9c8e8bfd4130b9d146175b21e833~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=796\&h=450\&s=64436\&e=png\&b=fbf8f6) ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4fcc01cd2e114362846463c2975888f0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=828\&h=444\&s=67202\&e=png\&b=fbf8f6) 但是我们刷新浏览器的时候，其他加载的页面也会去加载`default.tsx`的内容 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4372e9e5cc14b09a329441be055899d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=798\&h=408\&s=63144\&e=png\&b=fbf7f5) 这样写标签页的好处，我想的是页面刷新后，也保持了之前的状态。如果是以前的写法，状态记录在当前组件内，页面一刷新就会重置到原始的状态。 #### 3.5.5 使用插槽完成一个`Modal`模态窗口这里我们用官网的登录窗口来举例子，要实现之前，我们需要了解一下**拦截路由**。拦截路由，允许我们在当前的布局下，去加载应用另外一个部分的路由内容。我们创建拦截路由，需要按照这个规则：`(.)folderName`，`.`有点类似于相对路径，当然还有另外的规则，我们来看看完整的规则： * (.) 用于匹配同一级别上的路由段 * (...) 用于匹配高一级的路由段 * (..)(..) 用于匹配高两级的路由段 * (...) 用于匹配应用程序根目录中的路由段接下来，我们再创建`/app/(auth)/layout.tsx`和`/app/(auth)/login/page.tsx`，文件 `/app/(auth)/layout.tsx` ```tsx export const metadata = { title: "Login Page", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body>{children}</body> </html> ); } ``` `/app/(auth)/login/page.tsx` ```tsx const LoginPage = () => { return <div>我是登录页面</div>; }; export default LoginPage; ``` 我们完成了我们的登录页面，然后我们在`/(home)/layout.tsx`加入一个跳转到登录页面的链接 `/(home)/layout.tsx` ```tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/globals.css"; import React from "react"; import Link from "next/link"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, favorite, daily, auth, }: Readonly<{ children: React.ReactNode; favorite: React.ReactNode; daily: React.ReactNode; auth: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}> <nav> <Link href="/login">点击登录</Link> </nav> 我是Home Root布局： {children} {daily} {favorite} {auth} </body> </html> ); } ``` 页面中出现了跳转登录的按钮 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8644b74c90e04bd5a9a4d0a72321cf9d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=850\&h=638\&s=75064\&e=png\&b=fcf9f8) 我们点击登录链接，直接跳转到了登录页面 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77d8c7c9d3eb4703bd5545385bacbe31~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=682\&h=272\&s=34496\&e=png\&b=f9f5ef) 但是这不是我们想要的结果，因为我们想通过**拦截路由**去实现登录弹窗。我们接着实现，我们直接在`/(home)`目录下面建立`@auth`插槽，并且添加`login/page.tsx`，并且在之前`src/components`下面新增一个弹窗组件`Modal`，来看看代码 `/(home)/@auth/login/page.tsx` ```tsx import { Modal } from "@/components"; const LoginModal = () => { return ( <div> <Modal title="登录">我是登录窗口内容</Modal> </div> ); }; export default LoginModal; ``` `src/components/Modal/index.tsx` ```tsx "use client"; import { useRouter } from "next/navigation"; type ModalProps = React.PropsWithChildren<{ title?: string; }>; const Modal = (props: ModalProps) => { const { title = "模态窗口", children } = props; const router = useRouter(); return ( <div className="fixed w-screen h-screen left-0 top-0 bg-[rgba(0,0,0,0.4)]"> <div className="bg-white w-[200px] h-[200px] left-4 top-4 absolute box-border p-4"> <div className="flex w-full justify-between"> <h1>{title}</h1> <button onClick={() => { router.back(); }} > 点击关闭 </button> </div> <div>{children}</div> </div> </div> ); }; export default Modal; ``` `src/components/index.ts` ```ts export { default as Modal } from "./modal"; ``` 打开页面一看，发现多了一个`404`的页面 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dde1b5099be643159d60c193f8f10e4d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2228\&h=1412\&s=96003\&e=png\&b=fdfbfb) 我们还需要在`@auth`目录下面增增加一个`default.tsx` 这里默认返回空，是因为我们就只需要弹窗，其他页面不需要渲染该页面的任何东西。 `@auth/default.tsx` ```tsx const DefaultAuth = () => { return null; }; export default DefaultAuth; ``` 然后我们在来看看，页面 OK 了 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3d2840a2b6146f59dc4929caae15757~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=760\&h=664\&s=77655\&e=png\&b=fcf9f8) 点击登录链接也能出来了 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aebe42203dbc4aafb717766be404c870~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=966\&h=662\&s=67832\&e=png\&b=989898) 再试试关闭弹窗、前进、后退路由操作，我们的登录弹窗都能正常出现。 ⚠️ 注意注意：在弹窗出现的情况，我们再刷新整个页面，这个时候，会直接走`/app/(auth)/login`的内容，路由拦截失效，路由的活动状态在我们`硬导航`后直接失效。到这里我们继续学会了怎么去创建渲染一个路由。 </article></body></html>

--- highlight: a11y-dark theme: channing-cyan --- # NextJs 学习笔记 ## 1. 创建模版这里我们直接使用`Nextjs`官方的命令： ```shell npx create-next-app@latest ``` 执行完命令后，我们跟随以下的步骤来选择： ```node // 输入你的项目名字默认是 my-app What is your project named? my-app // 是否使用TypeScript 是 Would you like to use TypeScript? No / Yes // 是否使用ESLint 是 Would you like to use ESLint? No / Yes // 是否使用Tailwind CSS 是 Would you like to use Tailwind CSS? No / Yes // 是否使用 /src 目录是 Would you like to use `src/` directory? No / Yes // 是否使用App Router 是 Would you like to use App Router? (recommended) No / Yes // 是否自定义别名否 Would you like to customize the default import alias (@/*)? No / Yes ``` 在最后一步确认后，会自动给你安装相关的依赖项目。到这里我们就得到了我们的开发模版。 ## 2.目录结构我们来看看目录结构(主要包含一些高优先级的文件夹和文件)： ```md - public // 存放本地加载的静态文件 - src - app // App 路由(所有的路由都在里面定义) - page.tsx // 访问 '/'根路由时，会默认访问'app'目录的该文件 - layout.tsx // '/'根路由的布局组件，根目录会自动生成，访问时，会将当前目录'page.tsx'嵌套在里面 - globals.css // 全局样式文件，初始化可以将除了 TailWindcss 的内容全部删除 - favicon.ico // 浏览器标签图标 * next.config.js // Next.js 配置文件 * package.json // 项目配置文件 * .eslintrc.json // ESLint 配置文件 * .gitignore // 需要忽略上传的文件和文件夹 * next-env.d.ts // Next.js 的 TS 声明文件 * tsconfig.json // TypeScript 配置文件 ``` ## 3. 路由约定在讲路由之前，我们先来讲讲 NextJs 中常见的文件声明约定 ### 前置 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0d1ae5cf90a4789a4d2bbcf508e243a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=902\&h=1272\&s=100304\&e=png\&b=fcfcfc) #### `layout.tsx` `layout.tsx`布局的内容可以在不同的路由间共享。例如我们的根路由的`/app/layout.tsx`文件，它使用``和``组成 ```tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/globals.css"; import React from "react"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` 当我们目录下面存在`layout.tsx`并访问路由时，我们的所有页面都会被该布局组件嵌套一层。 `layout.tsx`还会接受一个属性`params`，当我们访问**动态路由**(后面会详细讲到)的时候，能够从`props`里面拿到。对于根布局组件我们需要知道 * `app`根目录必须包含一个`/app/layout.tsx` * 根布局必须包含`` 和 ``标签，其余的``,`<meta>`等等，都不需要，NextJs 提供了函数去动态添加 * 我们可以使用**路由组**(后面会详细讲到)去创建多个不同的根布局，前提是根据你的需求来使用。 #### `page.tsx` `page.tsx`文件用于渲染对应路由的正文内容，它接受两个参数`params`,`searchParams`，我们直接来看官方的例子 `params`例子 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ca7ff706e324f0caee9825f4dcc89a1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1670\&h=596\&s=79531\&e=png\&b=fbfbfb) `searchParams`例子 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af5ebf5f25ae4809b0ce1285d83b700f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1500\&h=586\&s=51679\&e=png\&b=fdfdfd) #### `loading.tsx` `loading.tsx`文件配合着`Suspend`一起使用，会立即创建出一个加载的状态，我们可以用它来做骨架屏之类的效果 #### `not-found.tsx` `not-found.tsx`文件用于捕获`notFound()`或者是当你访问了一个不存在的路由时，会默认返回该文件的内容 ⚠️ 注意注意创建该文件，得放到`/app`下面，否则无法覆盖 NextJs 默认自带的`not-found.tsx`界面。 #### `error.tsx` `error.tsx`文件捕获客户端组件和服务端组件抛出的错误，会作为一个占位显示。看一个官方的例子 ```tsx "use client"; // error.tsx 必须是一个客户端组件 import { useEffect } from "react"; export default function Error({ error, reset, }: { error: Error & { digest?: string }; reset: () => void; }) { useEffect(() => { // 上报错误 console.error(error); }, [error]); return ( <div> <h2>Something went wrong!</h2> <button onClick={ // 尝试重新恢复到未出错的状态 () => reset() } > Try again </button> </div> ); } ``` 我们来看看比较重要的几点 * 首先，`error.tsx` 必须是一个客户端组件 * `digest`代表的是一个`hash`值，它可以用来在服务端日志中匹配相关的错误 * `reset`是一个重置错误边界的函数，它会重新渲染错误边界的内容，如果成功，该组件被正确渲染的内容所替代 * `error.tsx`不会捕获同层级`layout.tsx`里面的内容，只能捕获在它下级的`layout.tsx` 那我们如何捕获`root layout`的错误呢？使用`global-error.tsx` #### `global-error.tsx` 一种用于捕获根布局`root layout`错误的文件 #### `route.ts` `route.ts`允许你使用`Web Request`和`Web Response`为一个给定的路由创建自定义的请求。具体支持的`Http methods` ```ts export async function GET(request: Request) {} export async function HEAD(request: Request) {} export async function POST(request: Request) {} export async function PUT(request: Request) {} export async function DELETE(request: Request) {} export async function PATCH(request: Request) {} export async function OPTIONS(request: Request) {} ``` 属性介绍：来看看一个官方的例子 `app/dashboard/[team]/route.ts` ```ts type Params = { team: string; }; export async function GET(request: Request, context: { params: Params }) { const team = context.params.team; // '1' } ``` #### `template.tsx` `template.tsx`文件和`layout.tsx`文件有点相似。它可以包裹`children`，但是会被`layout.tsx`包裹。并且当使用了`template.tsx`并且用户在其中切换路由，子页面会被重新创建渲染，状态也不会被保存。 #### `default.tsx` `default.tsx`会搭配着**平行路由**一起使用，后面会详细讲到。 ### 3.1 嵌套路由在`src/app`目录下面，我们每创建一个目录，代表一个**路由段**，我们可以通过该路由段来访问对应的界面。接下来，我们来创建一个`/blog`嵌套路由，我们在`app`目录下，新建立一个文件夹，然后在文件夹下面创建`page.tsx`（注意：`page.tsx`的内容也就是作为你访问路由的内容） `src/app/blog/page.tsx`内容： ```tsx const Blog = () => { return <div>我的博客界面</div>; }; export default Blog; ``` 执行`pnpm dev`命令后，在`localhost:3000`端口，访问`/blog`路由，我们可以看到如下的界面： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c65df588f4548b6a7393c90b814076b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=638\&h=152\&s=18584\&e=png\&b=f2f1e1) 刚刚我们主目录下面建立了一个嵌套路由，当然我们还可以在`blog`下面继续嵌套更多文件夹(路由)，用以创建更多、更深路由的界面 ### 3.2 动态路由 #### 3.2.1 创建基础的动态路由当我们需要根据实际需求中的 ID 去访问某个页面的详情时，这个时候，我们就需要使用的动态路由。例如，在这里，我要创建一个博客详情页面，我需要创建一个使用**中括号**包裹，在`/src/app/blog`目录下面，建立`[blogId]`目录，并且建立`[blogId]/page.tsx`页面，并且填入以下内容： ```tsx import React, { memo } from "react"; const BlogDetail = (props: { params: { blogId: string } }) => { return <div>博客ID: {props.params.blogId}</div>; }; export default BlogDetail; ``` 然后我们在`blog/page.tsx`添加路由跳转，以便跳转到博客详情页面，如下： ```tsx import Link from "next/link"; const BLOGS = [1, 2, 3, 4, 5]; const Blog = () => { return ( <div className="p-4"> <h1>我的博客界面</h1> <ul> {BLOGS.map((b) => ( <li key={b}> <Link href={`/blog/${b}`}>博客{b}</Link> </li> ))} </ul> </div> ); }; export default Blog; ``` 替换代码后，我们的博客页面添加了跳转到详情的入口： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06a7aa8f474a4c7e93c84d529493e895~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=660\&h=436\&s=32699\&e=png\&b=fefefe) 我们可以通过界面点击`博客1`等进入对应的详情界面： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65a6f57997fb4b4ab6ad9f18db7b3fd3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=624\&h=174\&s=16060\&e=png\&b=fdfdfd) 到这个时候我们就创建了一个基础的动态路由。 #### 3.2.2 匹配所有子路由我们还可以通过在方括号里面加省略号的方式，匹配更多路由，比如说，我在`blog`目录下面加入`[...slug]`文件夹，因为我们这里已经建立了`[blogId]`目录，所有这个目录只能够匹配出`/blog`路由下面所有除了一级路由以外的路由，举个例子： * `/blog/1` 这个路由会走到`[blogId]`目录下 * `/blog/1/2` 这个路由会走到`[...slug]`目录下我们先来看看刚刚创建的`[...slug]`下的文件内容，`[...slug]/page.tsx`： ```tsx import React, { memo } from "react"; const Others = (props: { params: { slug: string } }) => { return <div>其他: {JSON.stringify(props.params.slug)}</div>; }; export default Others; ``` 再来看看实际的情况： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fab672c6fed49a2b0bb496a7907e171~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=692\&h=186\&s=17493\&e=png\&b=fefefe) 这实际上就是走到了`[...slug]/page.tsx`内容下。这里我们还有一种**可选匹配所有子路由**，我们可以使用两个中括号来创建，`/blog/[[...slug]]/page.tsx`，它和上述的区别在于它可将`/blog`路由一起匹配。但是这里我们这里已经创建了`/blog/page.tsx`，所以这里会有冲突，nextjs 会提示报错。我们可以删除`/blog/page.tsx`，直接使用`/blog/[[...slug]]/page.tsx`匹配`blog`目录下面所有的路由。 ### 3.3 路由组当我们需要使用目录去组合、收纳一些有关联的路由这个时候我们可以使用**小括号**的形式包裹文件夹名字，例如`(folderName)`，并且它不会被声明为一个我们可以访问的路由，我们来举个例子，我想在`blog`目录同级再建立两个目录，一个是我喜欢的文章(`favorite-article`)，一个是我喜欢的视频(`favorite-video`)，如果我直接创建两个目录铺平，显得有点冗杂，这个时候我可建立一个路由组 `(favorite)`，然后在其目录下面再建立`article`、`video`目录如下 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c14f3f6531f541babf33d926ef35c540~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=408\&h=264\&s=15581\&e=png\&b=181818) 然后我们分别建立`page.tsx`，内容如下 `/(favorite)/article/page.tsx` ```tsx /** 最喜欢的文章 */ const Articles = () => { return <div>最喜欢的文章页面</div>; }; export default Articles; ``` `/(favorite)/video/page.tsx` ```tsx /** 最喜欢的视频 */ const Videos = () => { return <div>最喜欢的视频页面</div>; }; export default Videos; ``` 到这里，我们我们可以使用路由访问啦！我们分别访问，`/article`和`/video`试试： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7502f92234c94c7cac6cb9bb9081993b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=678\&h=158\&s=20244\&e=png\&b=f2f1e1) ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d908eda06c9415d896ac06bead501c0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=666\&h=176\&s=20778\&e=png\&b=f1f0e0) 当然，路由组还有一个强大的功能。我们可以根据不同的路由分组使用不同根布局(`root layout`)，这种情况适用于，不同的路由使用不同的布局方式。我们创建两个目录`(home)`，`(daily)`目录，然后将我们将`/app/layout.tsx`，`/app/page.tsx`都移动到`(home)`目录，把之前创建的`/app/blog`目录移动`(daily)`目录在下面，然后我们将`/(home)/layout.tsx`的内容复制，并且在`(daily)`和`(favorite)`目录下面分别创建`layout.tsx`： `/(daily)/layout.tsx`： ```tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "DAILY", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}>我是Daily根布局：{children}</body> </html> ); } ``` `/(favorite)/layout.tsx`： ```tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "FAVORITE", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}>我是Favorite根布局：{children}</body> </html> ); } ``` 我们来看看调整后的目录结构 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2ca6b9459c14ebd84f7fa9e7e02c65a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=448\&h=686\&s=57968\&e=png\&b=181818) 我们改造一下我们的首页： `(home)/page.tsx`： ```tsx import Link from "next/link"; export default function Home() { return ( <main> <h1>我的日常</h1> <ul> <li> <Link href={`/blog`}>博客</Link> </li> </ul> <h1>我的喜欢</h1> <ul> <li> <Link href={`/video`}>视频</Link> </li> <li> <Link href={`/article`}>文章</Link> </li> </ul> </main> ); } ``` 然后我们来看看具体的页面效果 * 首页`(home)`效果 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcec3dc028354614abd3e11fb44a8c97~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=584\&h=408\&s=33945\&e=png\&b=fdfdfd) * 日常`(daily)`效果 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be16f1efefba40f2901cd875f0c6603d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=794\&h=472\&s=41196\&e=png\&b=fefefe) * 我的喜欢`(favorite)`效果 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10cc5618b8bd4c98a436e307a4768fc4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=666\&h=202\&s=28350\&e=png\&b=fdfdfd) ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0995353478334211b8a1de7031f12103~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=634\&h=188\&s=28232\&e=png\&b=f3f2e2) 注意注意 ⚠️： * 当我们使用路由组并且想在其中使用单独的根布局`root layout`，我们也得把首页的`/app/layout.tsx`和`/app/page.tsx`也要移动到路由组里面，并且同级的路由组内，只能有一个`page.tsx`，不然 Nextjs 无法判断将哪个`page.tsx`作为首页页面。 * 统一层级路由组下面的目录名不能重名，例如，如果我在`(daily)`目录下面也创建一个`/(daily)/video`目录，这个时候会报错，Nextjs 无法判断使用哪个路由 * 使用多个根布局`root layout`会造成页面全量刷新 ### 3.4 私有目录刚刚我们谈到的**路由组**功能开发，其实就是为了更好的组织我们项目中目录、文件，我们刚才只是建立基本的路由文件`page.tsx`，但是实际开发中我们还会有通用组件、通用方法等等。这个时候，我们应该怎么去存放这些目录或者文件呢？ Nextjs App router 允许我们在路由目录下面建立文件，并且不被外界访问，他只会对客户端返回`page.tsx`或者`route.ts`，其他文件默认为私有内容，但是如果我们需要建立一个文件，文件名不能和 Nextjs 约定的文件名(如下图所示)重合，否则会报错。如果未来 Nextjs 新增一种约定和你之前定义的文件名重合，也会造成错误了。虽然但是这也不是什么大事儿。还是很推荐这种方式的。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7771f1717ee04ff39539b5b9a486fc5e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=656\&h=736\&s=59556\&e=png\&b=0b0b0b) 当然，如果你想建立一个私有的目录去存放一些公共的资源，有很多种方法，就看看自己约定的规范罢了。例如 * 我们可以直接在`/app`目录下面建立文件夹但是里面不放和 Nextjs 约定的文件名相同即可 * 在`/app`目录外建立文件夹，不会约束你的文件名(强烈推荐) * 在`/app`目录里面，使用下划线加目录名`_folderName`来建目录，这个也不会约束你的文件名我们选择第二种方式，来创建一些公共的目录，如下 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d42c6f1f6e48478fb4e583d1f763e90b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=454\&h=268\&s=14670\&e=png\&b=181818) ### 3.5 平行路由 & 路由拦截平行路由一般用于，当我们的网站页面，有多个模块(`dashboard`)或者可以根据条件选择性渲染某些模块时，我们可以使用平行路由来异步渲染这些模块提高我们页面的渲染性能。要创建平行路由，我们使用`插槽 slot`的形式，我们命名文件夹时使用`@folderName`的约定来创建一个`插槽`，当我们创建`插槽`之后，该`插槽`会以`props`的形式向下传递，我们可以在`/layout.tsx`里面直接获取到。我们来改造一下首页，创建`@daily`和`@favorite`插槽，如下： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb3ac45854064a7d99b771fc82abd267~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=356\&h=268\&s=25224\&e=png\&b=181818) 然后我们将之前首页的内容放到`@daily/page.tsx`和`@favorite/page.tsx`中 `@daily/page.tsx`： ```tsx import Link from "next/link"; const HomeDaily = () => { return ( <div> <h1>我的日常</h1> <ul> <li> <Link href={`/blog`}>博客</Link> </li> </ul> </div> ); }; export default HomeDaily; ``` `@favorite/page.tsx`： ```tsx import Link from "next/link"; const HomeFavorite = (props: any) => { return ( <div> <h1>我的喜欢</h1> <ul> <li> <Link href={`/video`}>视频</Link> </li> <li> <Link href={`/article`}>文章</Link> </li> </ul> </div> ); }; export default HomeFavorite; ``` 然后在`/app/(home)/layout.tsx`中我们使用`props`去接受`daily`和`favorite`这两个插槽，然后就完成使用平行路由改造首页。 ```tsx export default function RootLayout({ children, favorite, daily, }: Readonly<{ children: React.ReactNode; favorite: React.ReactNode; daily: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}> 我是Home Root布局： {children} {daily} {favorite} </body> </html> ); } ``` ⚠️ 注意： * `插槽`不属于路由段，所以它不会影响路由。例如我们在`@daily`下面建立`detail`目录，这个时候我们的路由是`/detail`而不是`/@daily/detail`。 * `children`其实也是一种插槽的，只不过是内部配置好的默认的插槽插槽还有很多的用法，我们来讲讲 #### 3.5.1 根据角色显示不同的插槽我们直接使用一下官方文档的例子，这里在`layout`里面，通过使用`checkUserRole`函数获取用户角色，然后选择`user`或者`admin`查插槽来渲染。 ```tsx import { checkUserRole } from "@/lib/auth"; export default function Layout({ user, admin, }: { user: React.ReactNode; admin: React.ReactNode; }) { const role = checkUserRole(); return <>{role === "admin" ? admin : user}</>; } ``` #### 3.5.2 加载独立的 Loaning 和 Loading Error 由于平行路由是独立加载的，所以我们可以使用独立的加载中状态`loading.tsx`和加载失败`error.tsx`来优化不同加载状态的处理，官方例子: ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/997515e237584b05a94a06000b29b5ce~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1600\&h=1218\&s=268322\&e=png\&b=1d1d1d) #### 3.5.3 活动状态和导航我们直接上例子，在`@favorite`文件夹下面新增一个`types`目录，路径为`/@favorite/types`，并且新增`page.tsx`: ```tsx /** 喜欢的分类 */ const FavoriteTypes = () => { return <div>喜欢的分类</div>; }; export default FavoriteTypes; ``` 然后在`/@favorite/page.tsx`里面新增喜欢分类的链接： ```tsx import Link from "next/link"; const HomeFavorite = (props: any) => { return ( <div> <h1>我的喜欢</h1> <ul> <li> <Link href={`/video`}>视频</Link> </li> <li> <Link href={`/article`}>文章</Link> </li> <li> <Link href={`/types`}>分类</Link> </li> </ul> </div> ); }; export default HomeFavorite; ``` 这时候，我们看主页是这样子的，多了一个分类： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8ec082c007a400497a15149c0ed7388~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=430\&h=394\&s=30755\&e=png\&b=fdfdfd) 我们点击这个分类，会发现，它直接使用`/@favorite/type/page.tsx`的内容覆盖掉当前插槽的内容，在这里 Nextjs 将它视为是一个`软导航`，Nextjs 会使用局部渲染，用插槽来将访问的路由内容渲染出来。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b2e9470d46c46fab4b3c81d87712748~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=382\&h=252\&s=23320\&e=png\&b=fcfcfc) 我们尝试刷新一下，发现插槽内容都显示`404`，这是因为当你重新加载整个页面，Nextjs 将它视为是一个`硬导航`，它无法判别当前插槽的状态，所以它会默认使用当前插槽的`default.tsx`内容渲染，如果没有，则会使用内置的`not-found.tsx`页面渲染。其实仔细想想，我们直接刷新浏览器之后，渲染`default.tsx`的内容，如果`default.tsx`的内容和`page.tsx`不同，就感觉有差异感。如果两个内容相同，那是不是代码又重复了。感觉这里有点奇怪～ #### 3.5.4 使用插槽完成一个`Tabs`标签页的功能完成插槽功能，我们只需要在`@favorite`目录下面新建一个`layout.tsx`文件，内容如下： ```tsx import Link from "next/link"; export default function Layout({ children }: { children: React.ReactNode }) { return ( <> <nav className="flex gap-2"> <Link href="/recommend-articles">推荐文章</Link> <Link href="/recommend-videos">推荐视频</Link> </nav> <div>{children}</div> </> ); } ``` 然后我们建立`recommend-articles`和`recommend-videos`目录，表示为推荐的文章和视频，内容如下： `recommend-articles/page.tsx` ```tsx const RecommendArticles = () => { return <div>我是推荐的文章</div>; }; export default RecommendArticles; ``` `recommend-videos/page.tsx` ```tsx const RecommendVideos = () => { return <div>我是推荐的视频</div>; }; export default RecommendVideos; ``` 我们可以看到如图所示，这个时候主页已经有了两个标签页，**推荐文章**和**推荐视频** ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/544d4498d3f1479cb623fd218eb72231~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=576\&h=592\&s=61031\&e=png\&b=fcf9f8) 当我点击其中一个时他会加载对应路由代码的内容，如下： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/714e9c8e8bfd4130b9d146175b21e833~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=796\&h=450\&s=64436\&e=png\&b=fbf8f6) ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4fcc01cd2e114362846463c2975888f0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=828\&h=444\&s=67202\&e=png\&b=fbf8f6) 但是我们刷新浏览器的时候，其他加载的页面也会去加载`default.tsx`的内容 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4372e9e5cc14b09a329441be055899d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=798\&h=408\&s=63144\&e=png\&b=fbf7f5) 这样写标签页的好处，我想的是页面刷新后，也保持了之前的状态。如果是以前的写法，状态记录在当前组件内，页面一刷新就会重置到原始的状态。 #### 3.5.5 使用插槽完成一个`Modal`模态窗口这里我们用官网的登录窗口来举例子，要实现之前，我们需要了解一下**拦截路由**。拦截路由，允许我们在当前的布局下，去加载应用另外一个部分的路由内容。我们创建拦截路由，需要按照这个规则：`(.)folderName`，`.`有点类似于相对路径，当然还有另外的规则，我们来看看完整的规则： * (.) 用于匹配同一级别上的路由段 * (...) 用于匹配高一级的路由段 * (..)(..) 用于匹配高两级的路由段 * (...) 用于匹配应用程序根目录中的路由段接下来，我们再创建`/app/(auth)/layout.tsx`和`/app/(auth)/login/page.tsx`，文件 `/app/(auth)/layout.tsx` ```tsx export const metadata = { title: "Login Page", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body>{children}</body> </html> ); } ``` `/app/(auth)/login/page.tsx` ```tsx const LoginPage = () => { return <div>我是登录页面</div>; }; export default LoginPage; ``` 我们完成了我们的登录页面，然后我们在`/(home)/layout.tsx`加入一个跳转到登录页面的链接 `/(home)/layout.tsx` ```tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/globals.css"; import React from "react"; import Link from "next/link"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, favorite, daily, auth, }: Readonly<{ children: React.ReactNode; favorite: React.ReactNode; daily: React.ReactNode; auth: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}> <nav> <Link href="/login">点击登录</Link> </nav> 我是Home Root布局： {children} {daily} {favorite} {auth} </body> </html> ); } ``` 页面中出现了跳转登录的按钮 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8644b74c90e04bd5a9a4d0a72321cf9d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=850\&h=638\&s=75064\&e=png\&b=fcf9f8) 我们点击登录链接，直接跳转到了登录页面 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77d8c7c9d3eb4703bd5545385bacbe31~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=682\&h=272\&s=34496\&e=png\&b=f9f5ef) 但是这不是我们想要的结果，因为我们想通过**拦截路由**去实现登录弹窗。我们接着实现，我们直接在`/(home)`目录下面建立`@auth`插槽，并且添加`login/page.tsx`，并且在之前`src/components`下面新增一个弹窗组件`Modal`，来看看代码 `/(home)/@auth/login/page.tsx` ```tsx import { Modal } from "@/components"; const LoginModal = () => { return ( <div> <Modal title="登录">我是登录窗口内容</Modal> </div> ); }; export default LoginModal; ``` `src/components/Modal/index.tsx` ```tsx "use client"; import { useRouter } from "next/navigation"; type ModalProps = React.PropsWithChildren<{ title?: string; }>; const Modal = (props: ModalProps) => { const { title = "模态窗口", children } = props; const router = useRouter(); return ( <div className="fixed w-screen h-screen left-0 top-0 bg-[rgba(0,0,0,0.4)]"> <div className="bg-white w-[200px] h-[200px] left-4 top-4 absolute box-border p-4"> <div className="flex w-full justify-between"> <h1>{title}</h1> <button onClick={() => { router.back(); }} > 点击关闭 </button> </div> <div>{children}</div> </div> </div> ); }; export default Modal; ``` `src/components/index.ts` ```ts export { default as Modal } from "./modal"; ``` 打开页面一看，发现多了一个`404`的页面 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dde1b5099be643159d60c193f8f10e4d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2228\&h=1412\&s=96003\&e=png\&b=fdfbfb) 我们还需要在`@auth`目录下面增增加一个`default.tsx` 这里默认返回空，是因为我们就只需要弹窗，其他页面不需要渲染该页面的任何东西。 `@auth/default.tsx` ```tsx const DefaultAuth = () => { return null; }; export default DefaultAuth; ``` 然后我们在来看看，页面 OK 了 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3d2840a2b6146f59dc4929caae15757~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=760\&h=664\&s=77655\&e=png\&b=fcf9f8) 点击登录链接也能出来了 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aebe42203dbc4aafb717766be404c870~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=966\&h=662\&s=67832\&e=png\&b=989898) 再试试关闭弹窗、前进、后退路由操作，我们的登录弹窗都能正常出现。 ⚠️ 注意注意：在弹窗出现的情况，我们再刷新整个页面，这个时候，会直接走`/app/(auth)/login`的内容，路由拦截失效，路由的活动状态在我们`硬导航`后直接失效。到这里我们继续学会了怎么去创建渲染一个路由。 </article></body></html>