Question

我想将ID作为自定义参数传递给next/link <Link />，并能够在getInitialProps中访问它。我想使用干净的URL，但我使用的API仅允许您通过帖子ID查询它。因此，尽管我可以在getInitialProps中访问帖子子弹，但不能使用它来查询帖子。

我目前已将其设置为使用URL中的帖子。

<Link href="/article" as={`/article/${urlPattern}`}>
    <a>{title}</a>
</Link>

在getInitialProps中，我可以通过context参数访问该子弹

Article.getInitialProps = async context => {
    const slug = context.query;
    // need query ID
    // do api call
};

有没有一种方法可以将ID传递给我，以便可以通过上下文在getInitialProps内部访问它来进行API调用？

** 编辑 **

我已经通过添加一个查询属性来更新了该属性，该属性允许我通过context.query.id访问ID，但是这样做还可以将页面URL更新为/ article / the-article-title？id = 234234324324包含文章ID而不是文章名称的URL，但是我仍然需要一种方法来访问getInItialProps中的文章ID，因此我要进行api调用。

<Link
    href="/article/[article]"
    as={{
        pathname: `/article/${urlPattern}`,
        query: { id: system.id }
    }}
>

Answer 1

您可以将URL object传递给as道具：

<Link
      href={"/article"}
      as={{
        pathname: "/article",
        query: { id: "query id" }
      }}
    >
      <a>title</a>
    </Link>

有一个例子：https://github.com/zeit/next.js/tree/master/examples/with-url-object-routing

Answer 2

您可以执行此操作。

 <Link
    href={{ pathname: '/article/[article]' , query: { id: system.id} }}
    as={'/service/somthing'} 
  >
  <a>some text</a>
  </Link>

**，您会得到这样的**

Article.getInitialProps = async ({ query }) => {
 let id = query.id

return{id}

}

如何将自定义参数传递给nextjs动态路由，以便可以在getInitialProps中访问它

2 个答案: