Javascript 如何在 NextJs 13 应用程序目录中获取 url 或参数

发布于07月06日

我正在try 将我的getserverside props()移植到next13，并且需要使用url.如何获取参数(从目录 struct )或url.我的页面路径是/posts/{postId}.这是我正在try 使用的代码

'use client'

async function fetchOnePost() {
  // need to access URL path or param `{postId}` here
}

export default async function Page() {
    const postData = await fetchOnePost();

return(<>....</>);
}

这是我的目录 struct ，指向该文件

app/
 - posts/
     - [postId]/
         - page.js

基本上，我想要与Pages目录(/Pages/post/[postID].js)中使用的以下代码相同的应用程序目录代码:

export async function getServerSideProps(context) {
  const { postId } = context.query;

  const something = somthingDoneWithPostId(postId)

  return { props: { something } };
}

推荐答案

根据docs，你应该可以这样做:

export default function Page({ params, searchParams }) {
  return <h1>My Page</h1>
}

使用打字脚本时也是如此:

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  return <h1>My Page</h1>
}

在您的特定情况下，您的代码将如下所示(使用服务器组件):

export default async function Page({ params }) {
  const postId = params.postId;

  const something = somethingDoneWithPostId(postId)

  return(<MyComponent something={something} >....<MyComponent/>);
}