0

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

我正在关注这个答案，但是当我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: "" },
  };
}
4

1 回答 1

1

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

  • params包含使用动态路由的页面的路由参数。例如，如果页面名称是[id].js，则params看起来像{ id: ... }。-文档
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您可以访问 pid 中的context.params.movieId .

您无法访问“查询字符串”，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的键相同的值：querypathname

<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。

于 2021-07-28T06:38:50.133 回答