Next.js - 如何将 id 从查询传递到 getInitialProps 函数
Posted
技术标签:
【中文标题】Next.js - 如何将 id 从查询传递到 getInitialProps 函数【英文标题】:Next.js - How to pass id from query to getInitialProps function 【发布时间】:2020-06-26 05:15:19 【问题描述】:我想用来自 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
。你有自定义服务器还是使用了 next 的 [param] 页面?
我只使用外部 API 没有任何服务器
是的,它正在工作我错过了那个上下文参数:) 感谢您的回答
【参考方案1】:
getInitialProps
作为参数获取context
对象,其中包含query
。
你应该在那里获得你的价值。
【讨论】:
以上是关于Next.js - 如何将 id 从查询传递到 getInitialProps 函数的主要内容,如果未能解决你的问题,请参考以下文章
Next.js 使用 getServerSideProps 如何将道具从页面传递到组件?
如何在 Next.js 中将路径名从 _document 传递到 _app
如何将 Post Item ID 传递给 getInitialProps?