临时解决 Gatsby 中文链接 activeClass 无效问题

2019-10-18 18:46

前端

Gatsby Link 组件在检查当前激活时,没有对当前 href 转义(encodeURI),导致链接中包含中文字符时判断不准确,activeClass 无效问题。其他非拉丁字符应该都有这个问题。

featured media

该问题实际是包 @reach/router 导致的,并已在这次commit 中解决,并更新 npm 为 1.3.0-beta.0

不过当前 Gatsby 依赖的 @reach/router 版本是 1.2.1,该版本未包含此 bug 修正。

临时解决

当初我提了 issuesPR,结果找错了问题根本所在😂。随后用户 pieh 给出了临时解决方案

使用 Yarn resolutions 配置,在 package.json 中添加如下:

  "resolutions": {
      "@reach/router": "1.3.0-beta.0"
  },

版本

  • gatsby: 2.15.36
  • gatsby-link: 2.2.20

等 Gatsby 的依赖更新了,要记得去掉这个临时配置。感谢热心❤的了不起的盖茨比社区成员。

分享