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

Posted 2023-02-24

【中文标题】盖茨比类别 slugs 在动态类别页面中不起作用

【英文标题】：Gatsby category slugs not working from dynamic category page

【发布时间】：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 的网址？

【参考方案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>) 通常做的那样。