NextJs 13,从layout.js中的URL获取参数

pjngdqdw  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(158)

对于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相同的级别,我是否也可以获得参数?我似乎无法获得参数。

zzwlnbp8

zzwlnbp81#

如果你有一个路由shop/[tag]/[item],那么:

  • app/layout.js无法同时访问tagitem
  • app/shop/layout.js无法同时访问tagitem
  • app/shop/[tag]/layout.js可以访问tag,但不能访问item
  • app/shop/[tag]/[item]/layout.js可以访问tagitem

因此,根据您放置layout.js的位置,对tagitem的访问将有所不同。
您可以改为执行名为Optional Catch-all Segments的操作
例如,app/shop/[[...slug]]/page.js将匹配:

  • /shop
  • /shop/1
  • /shop/1/2

如果您尝试访问/shop/1/2params将:

{ slug: ['1', '2'] }

相关问题