如何解决您可以从Next.js中的getStaticPaths中传递非字符串对象吗?
很明显,如果调用它的文件名为 [slug],则Next.js会强制您在slug
内提供一个名为getStaticPaths()
的 string 参数。 .js 。
但是,对于我来说,从getStaticPaths()
传递整个对象而不是仅仅传递它很方便。
我正在尝试在我的 [slug] .js 文件中执行以下操作:
export default function Expression({ expression,deFinitions }) {
return <div>{expression.expression}</div>
}
// Specify possible dynamic routes to pre-render.
export async function getStaticPaths() {
const response = await fetch('http://127.0.0.1:8000/dictionary/expressions')
const expressions = await response.json()
const paths = expressions.map(expression => ({
params: { expression: expression,slug: expression.slug }}))
return { paths,fallback: false }
}
// Fetch deFinitions.
export async function getStaticProps({ params }) {
const expression = params.expression
const response = await fetch(
`http://127.0.0.1:8000/dictionary/${expression.slug}`)
const deFinitions = await response.json()
return { props: { expression,deFinitions } }
}
TypeError:无法读取未定义的属性'slug'
似乎Next.js拒绝getStaticProps()
内部的任何不是“ slug”字符串的东西。有没有一种方法可以将名为我想要的名称的非字符串对象从params
传递到getStaticPaths()
?
解决方法
作为其文件
params
包含使用动态路由的页面的路由参数。例如,如果页面名称为[id].js
,则参数将看起来像{ id: ... }
。
因此答案是否定的,您只能从参数中访问slug
。顺便说一句,您为什么不拨通http://127.0.0.1:8000/dictionary/expressions
并与您的slug
进行比较?由于这些代码是在构建时执行的,因此不会影响您的网站加载速度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。