React开发：如何给指定域名的链接自动追加对应ID变量参数

实现思路 #

• 先定义指定域名与对应ID编码的映射规则，后续维护直接修改映射表即可
• 封装统一的URL处理函数，判断当前URL的域名是否在匹配列表中，匹配成功则追加对应ID编码，否则返回原URL
• 组件中调用处理函数生成最终的链接值即可

完整代码实现 #

首先定义域名和ID的映射规则：

const DOMAIN_ID_MAPPING = {
  "www.example.com": "ID-CODE1",
  "www.other.com": "ID-CODE2"
}

封装URL处理函数：

const formatLink = (rawUrl) => {
  // 空值直接返回
  if (!rawUrl) return rawUrl
  try {
    const urlInstance = new URL(rawUrl)
    // 域名不在匹配列表直接返回原地址
    if (!DOMAIN_ID_MAPPING[urlInstance.hostname]) return rawUrl
    // 方式1：严格符合URL参数规范拼接，自动处理?和&的区分，推荐用
    urlInstance.searchParams.append("id", DOMAIN_ID_MAPPING[urlInstance.hostname])
    return urlInstance.toString()

    // 方式2：如果你的业务要求必须直接拼接&[ID-CODE]格式，直接替换上面两行即可
    // return `${rawUrl}&${DOMAIN_ID_MAPPING[urlInstance.hostname]}`
  } catch (err) {
    // 非法URL直接返回原值
    return rawUrl
  }
}

修改你原有的代码调用：

link={formatLink(type.content?.url)}

注意事项 #

• 若你确定所有匹配的原URL均已携带查询参数（即URL中已存在?），可直接用字符串拼接简化逻辑，无需解析URL实例
• 若存在原URL无查询参数的场景，推荐使用URL实例的searchParamsAPI处理参数拼接，避免生成不规范的URL格式
• 映射表支持随时扩展域名和对应的ID编码，不需要修改处理逻辑

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