Gatsby JS路径更新异常求助：页面URL叠加引发404错误

我之前也碰到过一模一样的问题！核心原因是你在week.tsx模板里给LessonCard传递的是相对路径，而非绝对路径，导致浏览器（或是Gatsby的客户端路由）会把新页面路径追加到当前页面URL后面，而非从网站根目录开始解析。

问题根源拆解 #

看你week.tsx里的这段代码：

path={`lesson/${lesson.slug}`}

这个路径是相对路径格式。当用户处于https://nyxo.app/week/understanding-your-sleep页面时，点击这个链接会被浏览器解析为当前URL + 相对路径，也就是https://nyxo.app/week/understanding-your-sleep/lesson/lesson-name——但你在gatsby-node.js里创建的Lesson页面实际路径是根目录下的/lesson/lesson-name，自然会触发404错误。

而你在gatsby-node.js中的createPage配置是没问题的：Gatsby会自动把path: \week/${week.node.slug}`解析为绝对路径/week/${week.node.slug}`，所以页面生成是正确的。

快速修复方案 #

只需要把week.tsx里的路径改为绝对路径（在开头添加斜杠/）：

path={`/lesson/${lesson.slug}`}

这样无论用户在哪个页面点击课程卡片，链接都会指向网站根目录下的Lesson页面，不会再出现路径追加的问题。

额外排查建议 #

• 确认你的LessonCard组件内部使用的是Gatsby的<Link>组件进行跳转：虽然普通<a>标签改完路径也能正常跳转，但<Link>能提供Gatsby的客户端路由优化，提升页面切换体验。
• 如果问题依然存在，可以检查Gatsby缓存：有时候旧的路径缓存会导致异常，执行gatsby clean清理缓存后重新构建项目试试。

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