如何限制Gatsby的navigate函数仅跳转站内客户端路由而非外部站点

核心思路为封装一层自定义的安全跳转逻辑，替代原生navigate调用，跳转前先做路径合法性校验。

第一步：封装安全跳转工具函数 #

import { navigate as gatsbyNavigate } from "gatsby"

// 可选配置：需要放行的外部域名白名单，无需求可直接删除该配置
const ALLOWED_EXTERNAL_HOSTS = [
  // 'your-trusted-domain.com'
]

export const safeNavigate = (to, options) => {
  // 校验是否为外部链接：匹配http://、https://、协议相对路径//三种格式
  const isExternal = /^(https?:)?\/\//.test(to)
  if (isExternal) {
    const targetUrl = new URL(to, window.location.origin)
    // 不在白名单内的外部跳转直接拦截
    if (!ALLOWED_EXTERNAL_HOSTS.includes(targetUrl.host)) {
      console.warn(`已拦截非法外部跳转：${to}`)
      return
    }
  }
  // 合法路径调用原生navigate执行跳转
  return gatsbyNavigate(to, options)
}

第二步：替换项目中的navigate调用 #

把项目中所有直接从Gatsby导入navigate的逻辑，改为导入上述自定义的safeNavigate即可，原有调用参数完全兼容，无需调整其他业务逻辑。

可选：全局覆盖原生navigate（大项目适配方案） #

如果项目体积大、逐行替换成本高，可以在gatsby-browser.js中通过全局钩子覆盖原生navigate导出：

import { navigate } from "gatsby"
import { safeNavigate } from "./src/utils/safeNavigate"

export const wrapRootElement = ({ element }) => {
  Object.assign(navigate, safeNavigate)
  return element
}

注意：全局覆盖方案在Gatsby v4、v5版本下测试有效，低版本建议优先使用显式导入自定义函数的方式，避免兼容性问题。

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