盖茨比类别 slugs 在动态类别页面中不起作用答案

【问题标题】：Gatsby category slugs not working from dynamic category page盖茨比类别 slugs 在动态类别页面中不起作用
【发布时间】：2021-08-09 11:02:21
【问题描述】：

在我的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 的 URL，并在浏览器中显示类别页面。

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

【问题讨论】：

标签： javascript node.js reactjs gatsby slug

【解决方案1】：

但是，如果我单击另一个类别（从类别页面中 (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 },
    });
  });

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

在您的类别页面上：

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

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

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

【讨论】：