Next.js: 嵌套动态路由的getStaticPaths
Next.js: getStaticPaths for nested dynamic routes
假设你有这样的数据结构:
const data = {
posts: [{
id: 1,
title: "Post 1"
slug: "post-1"
}, {
id: 2,
title: "Post 2"
slug: "post-2"
}],
comments: [{
id: 1,
postId: "post-1",
text: "Comment 1 for Post 1"
}, {
id: 2,
postId: "post-1",
text: "Comment 2 for Post 1"
}, {
id: 3,
postId: "post-2",
text: "Comment 1 for Post 2"
}]
}
你有以下路线 /posts/[postId[/[commentId]
所以 Next.js 结构文件夹是:posts/[postId]/[commented].js
然后您需要为该路由生成静态路径。
我的编码如下:
export async function getStaticPaths() {
const { posts, comments } = data
const paths = posts.map((post) => {
return comments
.filter((comment) => comment.postId === post.slug)
.map((comment) => {
return {
params: {
postId: post.slug,
commentId: comment.id
}
}
})
})
}
但它不起作用。抛出的错误是:
Error: Additional keys were returned from `getStaticPaths` in page "/clases/[courseId]/[lessonId]". URL Parameters intended for this dynamic route must be nested under the `params` key, i.e.:
return { params: { postId: ..., commentId: ... } }
Keys that need to be moved: 0, 1.
如何将数据“映射”或“循环”为正确的返回格式?
提前致谢!
问题似乎是您从 getStaticPaths
数据返回的数据形状错误:
[
[ { params: {} }, { params: {} } ],
[ { params: {} } ]
]
正确的形状是:
[
{ params: {} },
{ params: {} },
{ params: {} }
]
刚试过,效果很好。
export async function getStaticPaths() {
const paths = data.comments.map((comment) => {
return {
params: {
postId: comment.postId,
commentId: comment.id
}
}
});
console.log(paths);
return {
paths,
fallback: false
}
};
它生成 3 个 url:
- /posts/post-1/1
- /posts/post-1/2
- /posts/post-2/3
这是你需要的吗?
就像提到@Aaron,问题是过滤器 y el 映射的双数组。
return {
paths: [
{ params: { id: '1' } },
{ params: { id: '2' } }
],
fallback: ...
}
文档➡https://nextjs.org/docs/basic-features/data-fetching#the-paths-key-required
假设你有这样的数据结构:
const data = {
posts: [{
id: 1,
title: "Post 1"
slug: "post-1"
}, {
id: 2,
title: "Post 2"
slug: "post-2"
}],
comments: [{
id: 1,
postId: "post-1",
text: "Comment 1 for Post 1"
}, {
id: 2,
postId: "post-1",
text: "Comment 2 for Post 1"
}, {
id: 3,
postId: "post-2",
text: "Comment 1 for Post 2"
}]
}
你有以下路线 /posts/[postId[/[commentId]
所以 Next.js 结构文件夹是:posts/[postId]/[commented].js
然后您需要为该路由生成静态路径。
我的编码如下:
export async function getStaticPaths() {
const { posts, comments } = data
const paths = posts.map((post) => {
return comments
.filter((comment) => comment.postId === post.slug)
.map((comment) => {
return {
params: {
postId: post.slug,
commentId: comment.id
}
}
})
})
}
但它不起作用。抛出的错误是:
Error: Additional keys were returned from `getStaticPaths` in page "/clases/[courseId]/[lessonId]". URL Parameters intended for this dynamic route must be nested under the `params` key, i.e.:
return { params: { postId: ..., commentId: ... } }
Keys that need to be moved: 0, 1.
如何将数据“映射”或“循环”为正确的返回格式? 提前致谢!
问题似乎是您从 getStaticPaths
数据返回的数据形状错误:
[
[ { params: {} }, { params: {} } ],
[ { params: {} } ]
]
正确的形状是:
[
{ params: {} },
{ params: {} },
{ params: {} }
]
刚试过,效果很好。
export async function getStaticPaths() {
const paths = data.comments.map((comment) => {
return {
params: {
postId: comment.postId,
commentId: comment.id
}
}
});
console.log(paths);
return {
paths,
fallback: false
}
};
它生成 3 个 url:
- /posts/post-1/1
- /posts/post-1/2
- /posts/post-2/3
这是你需要的吗?
就像提到@Aaron,问题是过滤器 y el 映射的双数组。
return {
paths: [
{ params: { id: '1' } },
{ params: { id: '2' } }
],
fallback: ...
}
文档➡https://nextjs.org/docs/basic-features/data-fetching#the-paths-key-required