如何解决Next js 嵌套动态路由:通过 getstaticprops 获取数据并在路由之间共享数据
我正在尝试构建一个具有嵌套动态路由和路由之间共享数据的 next.js 应用程序。文件结构如下所示:
-pages
-/level1
-/[level1_id].js
-index.js
-/level2
-/[level2_id].js
-index.js
Level2 的页面组件现在看起来是这样的(Level 1 看起来基本一样)
const Level2 = ({ data }) => {
console.log("Level2 ID:",data.data.id)
return (
<div >
{data.data.id}
</div>
)
}
export default Level2
export const getStaticPaths = async () => {
return {
paths: [ { params : {slug: ['1'],level1_id: '1',level2_id: '1'}}],fallback: false
}
}
export const getStaticProps = async (context) => {
const res = await fetch(`http://localhost:3000/api/level2/${context.params.level2_id}`);
const data = await res.json();
return {
props: {
data,}
}
}
API 现在只返回级别 ID:
export default (req,res) => {
const { level2_id } = req.query;
const data = { id: level2_id }
res.status(200).json({ data })
}
我的问题是:
当有人通过路径访问站点时,有没有办法在不获取客户端数据的情况下获取 level1 的数据 /level1/1/level2/1 ?
级别 2 取决于在级别 1 中获取(和静态导出)的数据(不仅仅是示例中级别 1 的 ID)。当我在主页上从 level1/1 导航到 level1/1/level2/1 时,我只是与 react 上下文共享该数据。但是,如果有人通过嵌套链接访问我的网站,则该数据显然不存在。我很想找到一种使用 getstaticprops(或类似的东西)来提供它的方法,这样站点就可以静态导出,而无需运行 api 和客户端数据获取。
任何帮助将不胜感激!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。