使用 Next.js 进行 3 级嵌套动态路由

Question

我正在尝试在我的下一个 js 应用程序中实现 3 级动态路由。到目前为止我只获得了2级动态路线。所有数据均来自无头 CMS。我正在使用 graphlQL

到目前为止，我成功获得了 2 个级别：博客/[类别]/[帖子]。但是我无法使其工作：博客/[类别]/[子类别]/[帖子]

这是该类别的代码：

import Link from "next/link";
import { getCategories, getPosts } from "../../../utils/datocmsHelper";

export default function CategoriesPage({ category, subcategories, posts }) {
  
  return (
    <div>
      <h1>{category.categoryName}</h1>
      <h2>sub-categories inside Category:</h2>
      <ul>
        {subcategories.map((subcategory) => (
          <li key={subcategory.slug}>
            <Link href={`/blog/${category.slug}/${subcategory.slug}`}>
              {subcategory.slug}
            </Link>
          </li>
        ))}
      </ul>
      <h2>Posts:</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/blog/${category.slug}/${post.slug}`}>
              {post.slug}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  ); 
}

export async function getStaticProps(ctx) {
  const categoriesData = await getCategories();
  const postsData = await getPosts(); 

  const currentCategory = categoriesData.allCategories.find(
    (category) => category.slug === ctx.params.category
  );

  const subcategoriesInCategory = categoriesData.allCategories.filter(
    (subcategory) => subcategory.category.slug === currentCategory.slug
  );

  const postsInCategory = postsData.allPosts.filter(
    (post) => post.category.slug === currentCategory.slug
  );
  

  return {
    props: {
      category: currentCategory,
      subcategories: subcategoriesInCategory,
      posts: postsInCategory,
    },
  };
}


export async function getStaticPaths() {
  const categoriesData = await getCategories();

  return {
    paths: categoriesData.allCategories.map((category) => ({
      params: {
        category: category.slug,
        
      },
    })),
    fallback: false,
  };
}

这是子类别的代码：

import { getPosts, getCategories } from "../../../../utils/datocmsHelper";

export default function CategoriesPage({ subcategory }) {
  return (
    <div className="flex flex-col">
      <h1>title: {subcategory.slug}</h1>
      <p>Category: {subcategory.category.slug}</p>
      <p>subcategory general content</p>
    </div>
  );
}


export async function getStaticProps(ctx) {
  const subcatogoriesData = await getCategories();

  const currentsubcategory = subcatogoriesData.allCategories.find(
    (subcategory) => subcategory.slug === ctx.params.subcategory
  );

  return {
    props: {
      subcategory: currentsubcategory,
    },
  };
}


export async function getStaticPaths() {
  const catogoriesData = await getCategories();

  return {
    paths: catogoriesData.allCategories.map((category) => 
      category.children.map((subcategory, i) => ({
        params: {
        
        subcategory: subcategory.slug,
        category: category.category.slug,
      },
    }))),
    fallback: false,
  };
}

这个帖子：

import { getPosts } from "../../../../../utils/datocmsHelper";

export default function CategoriesPage({ post }) {
  return (
    <div className="flex flex-col">
      <h1>title: {post.title}</h1>
      <p>Category: {post.category.slug}</p>
      <p>post general content</p>
    </div>
  );
}


export async function getStaticProps(ctx) {
  const postsData = await getPosts();

  const currentPost = postsData.allPosts.find(
    (post) => post.slug === ctx.params.post
  );

  return {
    props: {
      post: currentPost,
    },
  };
}


export async function getStaticPaths() {
  const postsData = await getPosts();

  return {
    paths: postsData.allPosts.map((post) => ({
      params: {
        
        post: post.slug,
        category: post.category.slug,
      },
    })),
    fallback: false,
  };
}

Answer 1

一种方法是在最后使用索引文件。

blog/[category]/[subcategory]/[post]/index.tsx
// can access category/subcategory/post values e.g. at blog/general/travel/5/

Next.js 动态路由

Answer 2

您还没有提供错误消息，所以我必须做一些猜测。对于任何级别的嵌套，您都需要为路径的前面动态部分以及当前页面提供值。我认为您在帖子页面中缺少

params

值，即如果您有 3 层嵌套，例如：

/[category]/[subcategory]/[id]

那么在您的

[id].js

页面中，您的

getStaticPaths

函数将类似于：

export async function getStaticPaths() {
  const postsData = await getPosts();

  return {
    paths: postsData.allPosts.map((post) => ({
      params: {
        
        post: post.slug,
        subcategory: post.subcategory.slug,
        category: post.category.slug,
      },
    })),
    fallback: false,
  };
}