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. 后端服务针对前端路由做映射。