javascript - Next.js-如何将ID从查询传递给getInitialProps函数

我想用db中的文章构建一个简单的网站。我的问题是我需要使用服务器来呈现这些文章，并且可以使用Next.js文档中的getInitialProps函数来实现：https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#getinitialprops-for-older-versions-of-nextjs

现在它可以正常工作，但是我想实现按其ID获取文章，我的链接应该像这样：

http://localhost:3000/articles/<some_id>

我已经做到了，但是现在我想读取该ID并将其传递给getInitialProps函数，以仅针对一篇特定文章来调用我的API。我的问题是我不知道如何传递router道具来从查询和调用API中获取该ID。

import { withRouter } from "next/router";
import fetch from "isomorphic-unfetch";

const Article = ({ router }) => {
  console.log(router);
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

Article.getInitialProps = async props => {
  console.log(props);
  const res = await fetch(
    `https://admin.jozefrzadkosz-portfolio.pl/articles/${router.query.id}`
  );
  const articles = await res.json();
  return { articles };
};

export default withRouter(Article);

最佳答案

getInitialProps作为参数context对象获得，该对象上具有query。

您应该在那里获得价值。

关于javascript - Next.js-如何将ID从查询传递给getInitialProps函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60683159/