如何解决Next.js动态路由错误:提供的路径“页面名称”与页面不匹配:`/ [slug]`
我正在尝试使用[slug] .js通过getStaticProps和getStaticPaths渲染与index.js相邻的页面。使用动态路由导航到页面时,出现不匹配错误。即使所提供的路径实际上与页面内容和页面道具内容匹配,也会发生此错误。
当index.js复制并重命名为page-name.js(例如“ about.js”)时,页面呈现良好,因此我认为问题在于我如何使用getStaticPaths。实际上,我没有完全理解getStaticProps和getStaticPaths之间的关系。给定地图中的任何路径,是否会发生一些映射以使引擎查找适当的道具?
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
};
}
{
"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()映射以数组形式返回“路径”:
[
'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
};
}
您还可以考虑清除服务器端的数据。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。