时间戳

首页 > 解决方案 > 盖茨比类别 slugs 在动态类别页面中不起作用

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

问题描述

在我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) 中，我会得到一个像/category/category-one/category-two?

标签： javascriptnode.jsreactjsgatsbyslug

解决方案

但是，如果我单击另一个类别（从类别页面 ( 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>) 通常做的那样。

推荐阅读