从 nextjs Link 组件传递数据并在 getStaticProps 中使用它 编辑：

如何解决从 nextjs Link 组件传递数据并在 getStaticProps 中使用它 编辑：

我有一个动态路由，我试图在 url 中显示 title 并将 id 传递（隐藏）到我的动态路由并使用 id在getStaticProps。我发现我无法在 nextjs 中轻松传递数据，因为我们过去常常使用 react router 或其他客户端路由库传递数据。

我正在关注 this 答案，但是当我 console.log(context.params) 时，我看不到 id 传递的 Link，我在这里做错了什么？

// index.js

      <Link
          href={{
            pathname: `/movie/[title]`,query: {
              id: movie.id,// pass the id 
            },}}
          as={`/movie/${movie.original_title}`}
        >
          <a>...</a>
      </Link>

// [movieId].js

export async function getStaticProps(context) {
  console.log(context.params); // return { movieId: 'Mortal Kombat' }

  return {
    props: { data: "" },};
}

解决方法

context 参数是一个包含以下键的对象：

• params 包含使用动态路由的页面的路由参数。例如，如果页面名称是 [id].js ，那么 params 将看起来像 { id: ... }。 - Docs

export async function getStaticProps(context) {
  console.log(context.params); // return { movieId: 'Mortal Kombat' }
  return {
    props: {},// will be passed to the page component as props
  }
}

如果动态页面看起来像 /pages/[movieId].js，您可以在 context.params.movieId 中访问 pid。

您无法访问 getStaticProps 中的“查询字符串”，因为正如文档所述，

因为 getStaticProps 在构建时运行，所以它不会接收仅在请求时可用的数据，例如查询参数或 HTTP 标头，因为它生成静态 HTML。

如果需要“查询字符串”，可以使用getServerSideProps，

export async function getServerSideProps(context) {
  console.log(context.query);
  return {
    props: {},// will be passed to the page component as props
  }
}

编辑：

关于 Link，您应该传递与用于动态 query 的 pathname 键相同的值：

<Link
  href={{
    pathname: `/movie/[title]`,query: {
      title: movie.id,// should be `title` not `id`
    },}}
  as={`/movie/${movie.original_title}`}
>
</Link>;

然后在/pages/[title].js中，

export async function getStaticProps(context) {
  console.log(context.params); // return { title: 'Mortal Kombat' }
  return {
    props: {},// will be passed to the page component as props
  }
}

注意 title 在文件名和 Link 中的查询对象中如何用作键。