代码之家  ›  专栏  ›  技术社区  ›  Ken

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

  •  0
  • Ken  · 技术社区  · 6 月前

    我对Next.js相当陌生,我一直在尝试实现一个页面的动态路由。跟随 docs ,它说要添加道具 params 作为promise返回如下参数:

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

    但我现在遇到的问题是,我无法将其设置为客户端组件(添加任何状态变量),因为它是一个异步组件,因此我最终会出现以下错误:

    错误:客户端组件尚不支持async/await,只有服务器组件支持。

    我不明白为什么 参数 必须是一个承诺。是否有方法在客户端组件页面中处理动态路由?

    1 回复  |  直到 6 月前
        1
  •  1
  •   Commodore64    6 月前

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

    我建议使用 useParam 此处引用的钩子 related documentation

    useParam 是一个客户端组件挂钩,允许您读取当前URL填充的路由动态参数。

    例子

    '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 '...'
    }