Next.js 客户端页面动态路由

Question

我对 Next.js 相当陌生，我一直在尝试实现到我的页面之一的动态路由。在 docs 之后，它表示将 prop

params

添加到页面作为返回参数的承诺，如下所示：

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const slug = (await params).slug
  return <div>My Post: {slug}</div>
}

但是我现在遇到的问题是我无法将其设为客户端组件（添加任何状态变量），因为它是异步组件，因此我最终遇到以下错误：

错误：客户端组件尚不支持 async/await，仅服务器组件支持。

我不明白为什么

params

需要成为一个承诺。有没有办法在客户端组件页面中处理动态路由？

Answer 1

我假设您正在使用 nextjs 13.4+ 及其应用程序路由器。

我建议使用

useParam

钩子，如相关文档中所引用的那样

示例

'use client'
 
import { useParams } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const params = useParams<{ tag: string; item: string }>()
 
  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)
 
  return '...'
}