webpack-dev-server 使用 react-router 启用 browserhistory 采坑记

问题的产生

今天下午请假，忙完手头事以后，在家实在无聊，想着从0开始搭建一个 react 的项目。webpack 基本配置以前研究过，没什么大问题。谁想，在 react-router 的配置时出现了个大坑。

router 版本采用最新的5版本。官网提供 browserrouter 和 hashrouter 两种方式，为了项目的连接 url 好看，我选择了第一种。

本地用 webpack 开发 react，固然 少不了 devserver，devserver提供一个静态资源访问服务。至关于在开发阶段给你配置了一个服务器。因此，问题油然而生，router 中的路由其实自己访问的应该是 router 中所配置的页面组件，可是实际上访问 的时 devserve 所提供的静态资源，因此url 中的 path 映射到文件夹下，确定是404，找不到文件。没想到啊，本地开发竟然有这种问题，亏我是有接近两年工做经验的前端，惭愧，不玩了，多学习，羞羞。

browserHistory 使用的是 H5 的 history api，js 经过 history.push 或者 history.replace 处理跳转，页面连接只是被 replace 掉，并无刷新页面，所以速度快，展现效果好。

解决方案

经过查看 devserver 文档，发现有配置项

按照官方文档处理后，果真有效。重启服务后，不存在的文件的 pathname 被 fallback 了。

至此，个人问题就解决了。
查看官网配置，发现也能够传递一个对象，来进行精准匹配，前提是多入口打包的话。

问题延伸

同理，当我开发完成，把打包压缩后的文件放置到服务器上时，访问单页路由连接时，依然会有此问题。

在此阶段的我，对于服务器仍是一个小白，只能稍谈一些解决方案

1. 后端服务针对前端路由作映射。