next.js - 从 nextjs Link 组件传递数据并在 getStaticProps 中使用它

Question

我有一个动态路由，我试图在 url 中显示 title 并将 id 传递(隐藏)到我的动态路由并使用 id 在 getStaticProps 中。我发现我无法像过去使用 React 路由器或其他客户端路由库那样轻松地在 nextjs 中传递数据。

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

// 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: "" },
  };
}

Answer 1

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.movi​​eId 中访问 pid。

您不能在 getStaticProps 中访问“查询字符串”，因为正如文档所述，

Because getStaticProps runs at build time, it does not receive data that’s only available during request time, such as query parameters or HTTP headers as it generates static HTML.

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

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

编辑:

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

<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 中的查询对象中用作键的。