Question

我一直在遵循网站上的教程来构建一个小型应用程序。我陷入了基于子目录结构的全部路由或嵌套路由。

我将所有文件都作为标记放置在./posts目录和./pages目录中，我希望有一些帖子生活在其中的子目录（类别）。

pages/content/category-1/post1
pages/content/category-2/post2
etc

我的网站只能在pages/content/[id].js处提供内容，如果我将[...id].js用作捕获所有路由的方式，则会出现此错误：

Error: A required parameter (id) was not provided as an array in getStaticPaths for /category/[...id]

如果我将[id].js放在每个子目录./pages/content/category-1/[id].js中，则可以使用，但是如果我有很多类别目录，那效率就很低。

我正在学习本教程，我的[...id].js如下所示：

import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import utilStyles from '../../styles/utils.module.css'
import Head from 'next/head'

export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  )
}

export async function getStaticPaths() {
  // Return a list of possible value for id
  const paths = getAllPostIds()
  return {
    paths,
    fallback: false
  }  
}

export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
  const postData = await getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

使用[... id] .js的静态嵌套路由内容（目录）时出现next.js错误

0 个答案: