对于Next.js 13,他们引入了使用服务器组件的应用程序路由。我想从URL中检索参数,如下所示:app/shop/[tag]/[item]/layout.js /shop/1/2 { tag: '1', item: '2' }
如果我在与layout.js相同的级别访问page.js,那么layout.js可以按如下方式检索参数。
export default function ShopLayout({
children,
params,
}: {
children: React.ReactNode
params: {
tag: string
item: string
}
}) {
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
return <section>{children}</section>
}
但是,如果我将layout.js放在与app/shop相同的级别,我是否也可以获得参数?我似乎无法获得参数。
1条答案
按热度按时间zzwlnbp81#
如果你有一个路由
shop/[tag]/[item]
,那么:app/layout.js
无法同时访问tag
和item
app/shop/layout.js
无法同时访问tag
和item
app/shop/[tag]/layout.js
可以访问tag
,但不能访问item
app/shop/[tag]/[item]/layout.js
可以访问tag
和item
因此,根据您放置
layout.js
的位置,对tag
和item
的访问将有所不同。您可以改为执行名为Optional Catch-all Segments的操作
例如,
app/shop/[[...slug]]/page.js
将匹配:/shop
/shop/1
/shop/1/2
如果您尝试访问
/shop/1/2
,params
将: