gpt4 book ai didi

javascript - Next.js动态路由错误: The provided path `page-name` does not match the page: `/[slug]`

转载 作者:行者123 更新时间:2023-12-04 11:28:22 26 4
gpt4 key购买 nike

我正在尝试使用 [slug].js呈现与 index.js 相邻的页面通过 getStaticPropsgetStaticPaths .使用动态路由导航到页面后,我收到不匹配错误。即使提供的路径确实与页面 slug 和页面 Prop 内容匹配,也会发生此错误。
index.js被复制并重命名为 page-name.js (例如 about.js )页面呈现良好,所以我认为问题在于我如何使用 getStaticPaths .实际上,我并没有完全理解 getStaticProps 之间的关系。和 getStaticPaths .是否存在一些映射以允许引擎在给定 map 中的任何路径的情况下查找适当的 Prop ?Index.js

import Link from 'next/link';
import { getPageDataBySlug } from '../lib/api';

export default function Page(pageData) {
const page = pageData;
return (
<>
<h1>document title is: {page.documentTitle}</h1>
<Link href="/[slug]" as="/about">
<a>
<h5>Link to About</h5>
</a>
</Link>
</>
);
}

export async function getStaticProps() {
const props = await getPageDataBySlug('home');
return {
props
};
}
[slug].js
import Link from 'next/link';
import { getPageDataBySlug, getApiDataPaths } from '../lib/api';

export default function Page(pageData) {
const page = pageData;

return (
<>
<h1>document title is: {page.documentTitle}</h1>
<Link href="/" as="/">
<a>
<h5>Link to Home</h5>
</a>
</Link>
</>
);
}

// Only grab the entry for this page
export async function getStaticProps({ params }) {
const props = await getPageDataBySlug(params.slug);
return {
props
};
}

export async function getStaticPaths() {
const apiDataPaths = await getApiDataPaths();
return {
paths: apiDataPaths?.map(({ slug }) => `${slug}`) ?? [],
fallback: false
};
}
getStaticProps返回正确的页面内容
{
"title": "About",
"slug": "about",
"description": "About page description",
"documentTitle": "Pithy Compelling Headline",
"article": {
"content": [[Object], [Object]],
}
}
getApiDataPaths()返回
[
{ slug: 'about' },
{ slug: 'another-page' },
{ slug: 'yet-another' }
]
getStaticPaths() map 返回 paths作为一个数组:
[
'about',
'another-page',
'yet-another'
]
我在这里想念什么?应该 getStaticPaths只有当前页面的路径?
FWIW 我使用 Contentful 作为 API,并且运行良好。

最佳答案

Next Js Docs帮助找到错误。
这就是你出错的地方。您以这种格式传入一个对象数组:

[{id:1}, {id:2}]
当 getStaticPaths 期待这个时:
[
{ params: { id: '1' } },
{ params: { id: '2' } }
]
解决方案:
  export async function getStaticPaths() {

const apiDataPaths = await getApiDataPaths();
// Empty arr to build new paths
const newPaths = [];
// Add params to every slug obj returned from api
for (let slug of apiDataPaths) {
newPaths.push({ params: { ...slug } });
}
// Return paths to render components
return {
paths: newPaths,
fallback: true
};
}
您还可以考虑清理服务器端的数据。

关于javascript - Next.js动态路由错误: The provided path `page-name` does not match the page: `/[slug]` ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63927689/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com