webpack-dev-server搭配react-router找不到资源文件的问题解决

最近使用webpack3 + react-router4开发一个小项目, 发现使用BrowserRouter时进入到二级url, 如从localhost:8080/ 进入到 localhost:8080/background时本来的资源文件会找不到.

问题的解决方法是所有的资源文件都使用绝对路径, 因为在webpack.config.js配置的是:

devServer: {
    // 本地服务器所加载页面所在目录
    contentBase: './'
}

即dev-server读取资源文件时是从./这个目录去读取的, 即 webpack.config.js这个配置文件的同目录, 那么引用资源文件的时候最不要使用相对路径而使用绝对路径, 比如<img src="/img/header.jpg">而不要使用相对路径如<img src="../img/header.jpg">等, 使用相对路径时进入到不同的url则会找不到对应的资源文件.