React Router 4刷新/admin/:id路由时静态资源路径错误求助

嘿，这个问题我之前开发的时候也踩过坑！核心原因是静态资源用了相对路径引用，当你访问/admin/:id这种嵌套路由时，浏览器会把当前路径当成/admin/，请求资源时就自动加上了这个前缀，导致资源找不到。下面给你几个靠谱的解决方案：

方案1：给资源引用加上根路径前缀 #

把你代码里所有引用字体、图片的地方，从相对路径改成绝对路径，也就是在路径开头加上/：

• 比如原来的 <img src="otherandomid.png" /> 改成 <img src="/otherandomid.png" />
• 字体引用里的 url('somerandomid.ttf') 改成 url('/somerandomid.ttf')

这样不管当前路由是什么，浏览器都会从网站根目录去请求资源，就不会出现路径错误了。

方案2：配置Webpack的publicPath（推荐） #

如果你不想手动修改每一处资源引用，可以直接在Webpack配置里设置publicPath，让打包后的资源自动带上根路径前缀。修改你的Webpack配置的output部分：

output: {
  path: path.join(__dirname, 'public'),
  filename: 'bundle.js',
  publicPath: '/' // 新增这一行
},

Webpack会自动给所有打包生成的资源（包括CSS里的字体、图片引用）加上/前缀，彻底解决相对路径的问题。

方案3：检查HTML的<base>标签 #

如果你的入口HTML文件里有<base>标签，确保它的href属性设置为根路径：

<base href="/">

这个标签会告诉浏览器所有相对路径的资源都以/为基准，避免路由层级影响资源解析。

补充说明 #

你的路由结构本身是没问题的，withRouter的使用也正确，问题完全出在静态资源的路径解析上。上面的方案任选其一都能解决问题，个人更推荐方案2，一劳永逸，不用修改业务代码。

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