Gatsby：导航链接到子页面上的顶级路由（使用 createPage 创建）不起作用答案

【问题标题】：Gatsby: Navigation links to top level route on subpages (created with createPage) not workingGatsby：导航链接到子页面上的顶级路由（使用 createPage 创建）不起作用
【发布时间】：2020-05-18 07:13:24
【问题描述】：

这可能是一个菜鸟问题，但是我在搜索论坛时无法真正找到解决方案：

我通过 pages 文件夹（文件名 careers.js 和相应的 slug /careers）创建了一个页面“职业”，并在 gatsby-node.js 文件中使用 createPages API 创建了几个职业子页面，如下所示：

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        const department = node.frontmatter.department
        const slug = node.frontmatter.slug
        const path = '/careers/${department}/${slug}'

         createPage({
             path,
             component: careerPositionTemplate,
              context: {
                  slug,
              },
         })
    })

我现在的问题是，一旦我进入一个子页面（即 /careers/engineering/position-engineer），我的页眉和页脚中指向 /careers/ 的导航链接不起作用。一旦我在任何包含顶级路线 /careers/ 的路线上，导航中 /careers/ 的链接就会在没有 href 的情况下呈现：

在 Navigation.js 文件中，链接定义为：

    <Link activeClassName="active" to="/careers" onClick={handleCloseOnTimeout}>
         <Button color="dark" size="md">Career</Button>
    </Link>

在 /careers/engineering/position-engineer 路线上，指向 /careers/ 的反向链接不起作用。页眉和页脚中的输出为：

   <a class="d-flex align-items-center ml-2">
       <button class="btn btn-dark btn-sm">Career</button>
    </a>

在没有顶级路线 /careers/ 的路线 /about/ 上，链接按照我想要的方式用 href 呈现：

  <a class="d-flex align-items-center ml-2" href="/careers">
     <button class="btn btn-dark btn-sm">Career</button>
   </a>

我已经尝试了一个插件gatsby-plugin-exact-client-paths，但是，该插件在安装后会抛出错误。所以我无法测试它是否能解决我的问题。在尝试了客户端路由的多项其他操作并徒劳地使用到达路由器手动设置路由之后，我现在非常绝望，可以在这里发布这个问题。不知道这里是否已经在其他地方得到了回答 - 我会很感激任何帮助。

环境（如果相关）

  System:
    OS: Windows 10
    Shell: Command Prompt, Powershell
  Binaries:
    Node: 12.16.2
    npm: 6.14.4
  Browsers:
    Chrome: 81.0.4044.138 (Offizieller Build) (64-Bit)
npmPackages:
    "gatsby": "2.21.33",
    "gatsby-image": "2.4.3",
    "gatsby-plugin-alias-imports": "^1.0.5",
    "gatsby-plugin-anchor-links": "1.1.1",
    "gatsby-plugin-compile-es6-packages": "^2.1.0",
    "gatsby-plugin-manifest": "2.4.3",
    "gatsby-plugin-offline": "3.2.2",
    "gatsby-plugin-postcss": "2.3.1",
    "gatsby-plugin-react-helmet": "3.3.1",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sass": "2.3.1",
    "gatsby-plugin-sharp": "2.6.3",
    "gatsby-plugin-transition-link": "^1.18.0",
    "gatsby-source-filesystem": "2.3.3",
    "gatsby-transformer-remark": "2.8.8",
    "gatsby-transformer-sharp": "2.5.2",
    "node-sass": "4.14.1",

【问题讨论】：

标签： node.js reactjs npm gatsby

【解决方案1】：

我在最小再现应用程序中重建问题后解决了问题。 Link 组件已被自定义 Link 组件重写，并且自定义 Link 组件的路由匹配未正确完成/存在错误。这就是链接在子页面/子路由上无法正常工作的原因。

【讨论】：