盖茨比:子页面上的顶级路由导航链接(使用 createPage 创建)不起作用



这可能是一个新手问题,但是我在搜索论坛时找不到解决方案:

我有一个通过页面文件夹(文件名职业.js创建的页面"职业",带有相应的 slug/careers(,并在文件 gatsby-node 中使用 createPages API 创建的职业的几个子页面.js如下所示:

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/的链接就会在没有href的情况下呈现:

在导航.js文件中,链接定义为:

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

在路线/职业/工程/职位工程师上,指向/职业/的反向链接不起作用。页眉和页脚中的输出为:

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

在路由/about/没有顶级路由/careers/上,链接按照我想要的方式使用 href 呈现:

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

我已经尝试了一个插件盖茨比-插件-精确-客户端路径,但是,该插件在安装后会引发错误。所以我无法测试它是否能解决我的问题。在使用客户端路由尝试了多种其他事情并使用到达路由器手动设置路由徒劳无功之后,我现在迫切地在这里发布这个问题。不知道它是否已经在其他地方得到了回答 - 我将不胜感激任何帮助。

环境(如果相关(

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",

我在最小的复制应用程序中重建问题后解决了问题。链接组件已被自定义链接组件重写,并且自定义链接组件的路由匹配未正确完成/有问题。这就是为什么链接在子页面/子路由上无法正常工作的原因。

最新更新