React Router带参路径下API及资源请求路径错误问题解决

问题场景 #

用create-react-app搭建的项目，搭配react-router-dom和axios，路由配置包含/view-details/:planId/:itemId。当导航到该路由（比如/view-details/1/2）时，出现两个问题：

• API请求路径变成了https://localhost:3000/view-details/1/api/details，而不是预期的https://localhost:3000/api/details
• 图片资源路径同样出错，变成https://localhost:3000/view-details/1/assets/img/img.png

项目现有配置：

• 未设置axios的baseURL
• package.json里配置了proxy: "http://localhost:5000"
• 试过添加"homepage": "/"，但没解决问题

原因 #

这是相对路径的解析逻辑导致的：当你使用不带前导斜杠的路径（比如api/details）时，浏览器会把它当成相对于当前页面URL的路径。在嵌套动态路由下，当前页面的URL路径是/view-details/1/2，所以相对路径会被拼到这个路径后面，最终生成错误的请求/资源地址。

解决方法 #

把所有API请求和静态资源的路径从相对路径改成带前导斜杠的绝对路径：

• API请求路径从api/details改为/api/details
• 图片资源路径从assets/img/img.png改为/assets/img/img.png

修改后，浏览器会将这些路径解析为相对于网站根目录的地址，既能正确指向目标API和资源，也能正常配合package.json中的proxy配置把请求转发到后端服务。

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