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

Question

在我的 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 组件）。当我单击此页面中的类别时，它工作正常，它显示 url，如 /category/category-one，并在浏览器中显示类别页面。

但是如果我单击另一个类别（从类别页面 (src/templates/CategoryPage.tsx) 中，我会得到一个 url，例如 /category/category-one/category-two?

Answer 1

But then if I click another category (from within a category page (src/templates/CategoryPage.tsx), I get an url like /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 },
    });
  });

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

在您的类别页面上：

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

注意：我不知道你的页面结构，但目标是添加一个初始斜线。

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

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

Gatsby category slugs not working from dynamic category page

javascript

node.js

reactjs

gatsby

slug