React如何将Stripe返回路径转为字符串用react-router-dom Link跳转

核心认知纠正 #

react-router-dom 提供的 Link、Redirect 组件仅支持单页应用内部路由跳转，完全不支持跳转到 stripe.com 这类外部域名地址。哪怕你拿到了字符串格式的外部链接，传入 Link 也会被识别为站内路径，无法跳转到Stripe官方页面，这个技术选型方向本身就是错误的。

你所说的使用window.location跳转耗时10-15秒，根本不是跳转API的问题，而是逻辑流程的问题：等待接口返回链接的时间被你误以为是跳转耗时。

第一步：修复接口返回值解析问题 #

你遇到的response.item不是字符串、toString()无效的问题，大概率是axios响应结构取值错误，或者返回值本身是对象格式，先加日志确认结构：

onAccountLinkSuccess = (response) => {
  // 打印完整响应排查结构
  console.log('完整接口响应：', response)
  console.log('item字段类型：', typeof response.item)
  // axios默认会把后端返回的内容包裹在data属性下，优先取data
  const realRes = response.data || response
  let pathUrl = ''
  if (typeof realRes.item === 'string') {
    pathUrl = realRes.item
  } else if (typeof realRes.item === 'object') {
    // 如item是对象，取出实际存储链接的属性即可，比如realRes.item.url
    pathUrl = realRes.item.url || JSON.stringify(realRes.item)
  }
  this.setState({ path: pathUrl })
}

第二步：改用标准a标签实现外部跳转 #

外部站点跳转本身就应该用原生a标签实现，还支持新标签页打开，不会中断用户在你站点的操作流程，你现在的代码逻辑是组件挂载时就预拉取链接，用户点击时链接已经就绪，不会有任何等待时间，完全满足速度要求：

render() {
  // 链接未获取完成时，可置灰按钮禁止点击避免报错
  if (!this.state.path) {
    return (
      <img
        src={connectbutton}
        style={{ width: "200px", opacity: 0.7, cursor: "not-allowed" }}
        alt="Connected Accounts Link"
      />
    )
  }
  return (
    <a href={this.state.path} target="_blank" rel="noopener noreferrer">
      <img
        src={connectbutton}
        style={{ width: "200px", cursor: "pointer" }}
        alt="Connected Accounts Link"
      />
    </a>
  );
}

可选优化方案 #

如果不想组件挂载就提前调用接口，也可以改成按钮hover时预取链接，或者点击时先展示loading状态，接口返回后再触发跳转，体验同样流畅。

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