react-router是否会干扰API请求地址？相对路径接口请求路径异常如何处理

你遇到的路径拼接异常核心是API调用使用了相对路径：当你在/profile/:username二级路由对应的页面发起请求时，相对路径会自动拼接在当前页面的路由路径后，再叠加代理前缀/api，就出现了多出来一层/profile的错误路径。其他接口调用正常是因为对应的调用页面都在一级路由下，相对路径拼接后结果符合预期。

• 方案1：修改API请求为绝对路径
  在请求路径前添加斜杠/，强制路径从站点根目录开始拼接，不受当前页面路由影响，修改后的调用代码如下：

const res = username 
            ? await axios.get("/posts/profile/"+username)
            : await axios.get("/posts/timeline/6120b0e07ea0361eb4982b1c");

• 方案2：全局配置axios的baseURL
  统一给所有axios请求绑定基础前缀，从根源避免相对路径拼接问题，在项目入口文件（通常是index.js）中添加全局配置：

import axios from 'axios'
// 配置后所有请求都会自动拼接该前缀，不受当前页面路由影响
axios.defaults.baseURL = '/api'

配置完成后原有请求代码不需要修改，即可正常获得预期的请求路径。

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