Gatsby动态编译静态页时导航URL与生成路径匹配方案咨询

核心根因 #

路径不匹配的核心原因是「静态页生成阶段」和「前端跳转阶段」对标题的URL格式化规则不一致：生成静态页时用了带lower: true配置的slugify库做格式化，跳转时直接使用原始未处理的标题，浏览器会自动对空格、特殊符号做转义，最终导致两者生成的路径完全不匹配。

可落地通用方案 #

方案1：统一公共格式化函数（最高优先级，改动最小） #

• 第一步：抽离全局唯一的slug格式化方法，保证所有场景规则完全对齐

// src/utils/slugify.js 同时兼容Node环境和浏览器环境
const slugify = require('slugify');

const SLUG_CONFIG = {
  lower: true,
  strict: true, // 自动过滤所有URL非法字符，避免特殊字符导致路径异常
  trim: true
};

module.exports = function generateArticleSlug(title) {
  return slugify(title, SLUG_CONFIG);
}

• 第二步：修改gatsby-node.js的生成逻辑，复用该函数

// gatsby-node.js 顶部引入
const generateArticleSlug = require('./src/utils/slugify');

// 生成页面路径处修改为
result.data.allStrapiFinancialEducationContents.nodes.forEach((node) => {
  createPage({
    path: `/articles/${generateArticleSlug(node.title)}`,
    // 其余原有配置保持不变
    component: path.resolve(templateForContentType.articles),
    context: { id: node.id }
  })
})

• 第三步：前端跳转时复用同一函数生成路径

// 业务组件中引入
import generateArticleSlug from '@/utils/slugify';

// Link组件配置修改为
<Link to={`/articles/${generateArticleSlug(article.title)}`}>
  {article.title}
</Link>

方案2：后端存储预生成的slug（长期最优方案，稳定性最高） #

• 新增内容时直接在Strapi侧用相同规则生成slug字段存储，不需要两端各自处理
• 静态页生成和前端跳转时直接读取后端返回的slug字段拼接路径即可，完全避免规则不一致问题，也支持自定义slug、标题修改后旧链接仍可访问等需求

方案3：临时对齐配置（仅应急使用） #

如果暂时无法抽离公共函数，可直接在前端跳转时使用和gatsby-node完全一致的slugify配置，不能缺省任何参数，保证生成规则对齐。

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