Gatsby.js使用Link组件跳转时路径重复拼接问题如何修复

该问题的核心诱因是Link组件的to属性传入了无开头根斜杠的非标准相对路径，Gatsby会默认将这类路径拼接在当前页面路径后，才会出现重复嵌套的错误地址，路径跳转错误会直接导致历史访问栈记录异常，无法正常返回。
可按以下方案逐一排查修复：

• 优先使用带根斜杠的绝对路径
  所有站点内跳转统一使用以/开头的绝对路径，这是兼容性最高、最不容易出错的写法，无论当前处于哪个路由层级，都会从站点根目录开始匹配目标地址，不会出现路径拼接错误。
  写法参考：

  // ❌ 错误写法：无开头斜杠，会被拼接到当前路径后
  <Link to="article/id2">第二篇文章</Link>
  
  // ✅ 正确写法：带根斜杠的绝对路径
  <Link to="/article/id2">第二篇文章</Link>
  

  如果是动态拼接的路径（比如从markdown frontmatter、接口返回的文章slug），一定要检查最终拼接出的字符串开头是否带/，避免漏写：

  // 动态路径拼接示例，注意模板字符串最前面的斜杠
  <Link to={`/article/${post.slug}`}>{post.title}</Link>
  

• 规范相对路径写法
  如果确实需要使用相对路径跳转（如同目录下的关联内容），必须显式写全相对路径标识符，和普通网页相对路径规则保持一致：同目录路径前加./，上级目录路径前加../，不能省略前缀直接写路径名，否则会被Gatsby识别为异常路径。
  比如当前处于/article/id页面，要跳转同目录下的id2页面，正确写法为：

  <Link to="./id2">同目录第二篇文章</Link>
  

• 排查路由插件配置
  如果路径写法确认无误仍存在问题，检查gatsby-config.js中客户端路由相关插件（如gatsby-plugin-create-client-paths）的配置，确认路由前缀没有重复定义路径段，避免插件层面的路径重复拼接。

路径写法修正后，跳转逻辑和浏览器历史记录的前进/返回功能会自动恢复正常，无需额外做历史栈的兼容处理。

内容的提问来源于stack exchange，提问作者Jaacoubi