服务器组件时在Next JS中获取动态路由中的路径？

Question

我需要在 Next JS 中获取动态路由中的路径。这在客户端组件中很容易做到。

在 src/app/[id]/page.tsx 中

"use client";
import { usePathname } from "next/navigation";

export default function Page() {
    const pathname = usePathname();

但是您不能usePathname在服务器组件中使用。如何在 Next JS 13 中获取 React 服务器组件中的 url？

Answer 1

当您的服务器组件位于动态段中时，它page.js会传递一个对象。params这params将包含您的动态路线 ID，如下所示：

// app/[id]/page.tsx

export default function Page({ params }: { params: { id: string } }) {
  const { id } = params;

  return <div>{id}</div>;
}