React中获取base URL拼接路径出现[object Object]如何解决

你出现[object Object]前缀的核心原因是拼接语法错误：在对象字面量中使用{baseURL}属于ES6对象属性简写语法，等价于{ baseURL: baseURL }，实际生成的是一个对象类型值。当对象和字符串做+运算时，会自动调用对象的toString()方法，最终得到[object Object]的异常前缀。

1. 修正路径拼接语法 #

直接移除baseURL外层多余的花括号即可，推荐优先用模板字符串写法可读性更高：

// 正确写法1：普通字符串拼接
{
  id: "1",
  url: baseURL + "/img1.jpg",
  fileName: "img1.jpg",
}

// 正确写法2：模板字符串（更推荐）
{
  id: "1",
  url: `${baseURL}/img1.jpg`,
  fileName: "img1.jpg",
}

2. 正确获取base URL #

根据你的业务场景选择对应获取方式：

• 场景1：资源部署在当前站点目录下
  如果你用create-react-app等脚手架创建的项目，直接读取内置的环境变量即可自动适配本地开发和线上部署路径：

  const baseURL = process.env.PUBLIC_URL
  

  如果需要手动拼接完整的站点根路径：

  const baseURL = window.location.origin + process.env.PUBLIC_URL
  

• 场景2：资源托管在独立CDN
  先在项目.env配置文件中添加自定义环境变量（React项目自定义环境变量需要以REACT_APP_开头）：

  REACT_APP_CDN_BASE = https://你的CDN服务根地址
  

  代码中直接读取使用：

  const baseURL = process.env.REACT_APP_CDN_BASE
  

• 场景3：需要取当前页面的上级路径作为base URL
  比如当前页面路径为https://domain.com/xxx/yyy.html，需要取https://domain.com/xxx作为base：

  const pathSegments = window.location.pathname.split('/')
  pathSegments.pop()
  const baseURL = window.location.origin + pathSegments.join('/')
  

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