如何正确在新标签页打开并显示Cloudinary附件资源

你使用的React Router <Link> 组件仅用于应用内部路由跳转，默认会把to属性传入的值当作站内相对路径解析，因此才会把Cloudinary的完整外链拼接到当前本地路由后面，生成错误的跳转地址。

直接把站外跳转用的<Link>组件替换为原生<a>标签即可，原生标签不会做站内路径的相对拼接，会直接跳转至完整外链地址。
修正后的代码：

{attachmentList.map((val, key) => {
  return (
    <tbody key = {key}>
      <tr style={{backgroundColor:'#e7ecf0'}}>
        <td>
          <a
            href={val.project_attachment_url}
            target="_blank"
            rel="noopener noreferrer"
          >
            {val.project_attachment_url}
          </a>
        </td>
      </tr>
    </tbody>
  )
})}

如果替换后仍有路径拼接问题，检查val.project_attachment_url字段值是否携带完整的https://协议头：如果地址缺失协议前缀，浏览器会默认把它识别为当前站点下的相对路径，依旧会拼接本地域名前缀。

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