Next.js动态路由错误：提供的路径“页面名称”与页面不匹配：`/ [slug]`

编程问答 2022-07-26

问题描述

我正在尝试使用[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
  };
}

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（）映射以数组形式返回“路径”： 

[
  'about','another-page','yet-another'
]

我在这里想念什么？ getStaticPaths应该仅是当前页面的路径吗？

（FWIW，我正在使用Contentful作为API，并且运行良好。）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

getstaticpathsgetstaticpropsjavascript