React Router无法访问/login路径 疑似与Babel配置存在冲突

问题根因 #

该问题和Babel完全无关，是BrowserRouter的特性与webpack-dev-server默认配置不匹配导致的：
BrowserRouter依赖HTML5 History API实现前端路由，当你直接在地址栏输入/login或刷新该路径时，浏览器会向本地开发服务发起GET /login的请求，webpack-dev-server默认只会返回真实存在的静态资源，找不到/login对应的文件就会返回Cannot GET /login的404错误，只有根路径/能匹配到默认的index.html，因此仅根路径路由正常。

解决方案 #

1. 打开项目根目录的webpack.config.js配置文件，在devServer配置项中添加historyApiFallback: true，示例如下：

module.exports = {
  // 你项目中其他已有的webpack配置保持不变
  devServer: {
    // 其他devServer已有配置保持不变
    historyApiFallback: true
  }
}

该配置的作用是让webpack-dev-server不管接收到什么路径的请求，都统一返回根路径的index.html，之后前端的React路由就会接手处理路径匹配逻辑。
2. 配置修改完成后，重启webpack-dev-server（终止正在运行的npm run dev进程，重新执行npm run dev命令即可），再访问/login路径就能正常加载页面。

补充说明 #

如果后续项目要部署到生产环境（比如Nginx、Apache等服务），也需要做对应的路径重写配置，保证所有前端请求都指向index.html，否则生产环境也会出现同样的路径404问题。

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