Gatsby 类别 slug 在动态类别页面中不起作用

问题描述

在我的 gatsby-node.js 中，我创建了动态类别页面：

exports.createPages = async ({ graphql,actions: { createPage } }) => {
  const {
    data: { projects,categories },} = await graphql(`
    query Projects {
      projects: allGraphCmsProject(filter: { stage: { eq: PUBLISHED } }) {
        nodes {
          id
          slug
        }
      }
      categories: allGraphCmsCategory {
        nodes {
          id
          slug
        }
      }
    }
  `);

  projects.nodes.forEach(({ id,slug }) => {
    createPage({
      path: `${slug}`,component: path.resolve('./src/templates/ProjectPage.tsx'),context: { id,slug },});
  });

  categories.nodes.forEach(({ id,slug }) => {
    createPage({
      path: `/category/${slug}`,component: path.resolve('./src/templates/CategoryPage.tsx'),context: { id },});
  });
};

在 src/templates/CategoryPage.tsx 中，我渲染了一个 CategoryList.tsx 组件。

在页面 /category (src/pages/category.tsx) 上的浏览​​器中，我还呈现列表类别（CategoryList.tsx 组件）。当我从这个页面点击一个类别时，它工作正常，它显示一个像 /category/category-one 这样的网址，并在浏览器中显示类别页面。

但是如果我点击另一个类别（从类别页面 (src/templates/CategoryPage.tsx) 中），我会得到一个类似 /category/category-one/category-two 的网址？

解决方法

但是如果我点击另一个类别（从类别页面中 (src/templates/CategoryPage.tsx)，我得到一个像 /category/category-one/category-two？

你的页面生成看起来不错，除了一些不必要的模板文字：

  projects.nodes.forEach(({ id,slug }) => {
    createPage({
      path: slug,// before was path: `${slug}`,component: path.resolve('./src/templates/ProjectPage.tsx'),context: { id,slug },});
  });

出现您的问题是因为您在 / 组件的 to props 开头缺少首字母斜杠 (<Link>)。

在您的类别页面上：

<Link to={`/${slug}`}/>{categoryName}</Link>

注意：我不知道您的页面结构，但目标是添加首字母斜杠。

这是因为 slug 可能带有或不带有首字母斜杠。如果没有，它会将当前 URL 连接到 slug 本身，就像锚点 (<a>) 通常所做的那样。