问题描述
很明显,如果调用它的文件名为 [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
进行比较?由于这些代码是在构建时执行的,因此不会影响您的网站加载速度。