配置捕获所有段
配置捕获所有段
动态段可以通过在方括号内添加省略号来扩展,以捕获所有后续段:[...folderName]
。
比如我们要访问这个路由/blog/a/b/c
,可以将目录名称从[slug]
更改成[...slug]
,页面params
的类型也设置为数组:
//app/blog/[...slug]/page.tsx
export default function Page({ params }: { params: { slug: string[] } }) {
console.log(params)
return <div>My Post: {params.slug}</div>
}
通常情况下,为了显示/blog/a/b/c上的页面,需要在[slug]
目录下面创建[userId]
,并在其下创建[categoryId]
,然后在下创建page.tsx
文件,可以为 useId
和 catagoryId
指定任何您喜欢的名称,但请确保它们与 slug
、userId
和categoryId
不同。
//app/blog/[slug]/[userId]/[categoryId]/page.tsx
export default function Page({ params }: { params: { slug: string,userId:string,categoryId:string } }) {
console.log(params)
return <div>
<p>slug:{params.slug}</p>
<p>userId:{params.userId}</p>
<p>categoryId:{params.categoryId}</p>
</div>
}
可选的捕获所有段
通过在双方括号内包含参数,可以将捕获所有段设置为可选的:[[...folderName]]
。
例如,app/shop/[[...slug]]/page.js
也将匹配 /shop,除了匹配 /shop/clothes
,/shop/clothes/tops
,/shop/clothes/tops/t-shirts
。
可选捕获所有段与捕获所有段的区别在于,对于可选的情况下,也会匹配不包含该参数的路由(在上面的示例中为 /shop)。
路由 示例 URL 参数
-
app/shop/[[…slug]]/page.js /shop {} -
app/shop/[[…slug]]/page.js /shop/a { slug: [‘a’] } -
app/shop/[[…slug]]/page.js /shop/a/b { slug: [‘a’, ‘b’] } -
app/shop/[[…slug]]/page.js /shop/a/b/c { slug: [‘a’, ‘b’, ‘c’] }
配置并行路由
通过使用并行路由,可以在一个布局中显示多个页面组件。
我们在app目录下创建两个目录:@analytics和@team,在每个目录下创建一个page.tsx
文件。
//app/@analytics/page.tsx
export default function Page() {
return (
<div className="m-4">
<h1 className="text-2xl">Analytics</h1>
</div>
)
}
//app/@team/page.tsx
export default function Page() {
return (
<div className="m-4">
<h1 className="text-2xl">Team</h1>
</div>
)
}
在app目录下的layout.tsx
文件中添加
//app/layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
team,
analytics
}: {
children: React.ReactNode
team: React.ReactNode
analytics: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<div>{children}</div>
<div>{team}</div>
<div>{analytics}</div>
</body>
</html>
)
}
设置完成之后,我们来访问首页/
,浏览器上会显示@analytics和@team的children和page.tsx
文件对应的app/page.tsx
的内容。
我们users目录下面有layout.tsx
文件,可以先删除。

重新加载时,Next.js 将首先尝试渲染不匹配插槽的default.js
文件。如果不可用,则会呈现 404。为了防止404页面的显示,需要在@analytics、@team目录下创建default.tsx
文件。
//app/@analytics/default.tsx
export default function Default() {
return <div className="m-4">Analytics Page</div>;
}
//app/@team/default.tsx
export default function Default() {
return <div className="m-4">Team Page</div>;
}
创建default.tsx
文件后,如果重新加载/users
页面,就会显示default.tsx
文件中写入的内容。

配置default.tsx
文件后,我们可以导入对应目录的Page
//app/@analytics/default.tsx
import Page from "./page";
export default function Default() {
return <Page/>
}
//app/@team/default.tsx
import Page from "./page";
export default function Default() {
return <Page/>
}
现在,从/
导航到 /users
页面时,会显示相同的内容。
关注我一起来学习Next.js14吧!
原文始发于微信公众号(大前端编程教学):5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/224404.html