webpack 配置react-router 服务，及react-router浅析

     自己本地写了一个拉取网络实时的统计数据的web，因为有服务端和客户端，所以我为了方便，统一写在了一个文件夹中，目录结构如下（最终目录结构）：

　　

 　　服务端的逻辑基本在server里面，web的相关代码都在webroot中。

　　本地启动服务localhost开发react-router相关项目时，碰到了问题，因为是前后端在同一文件夹的，所以前端跑webpack-dev-server,这里面涉及到路径的配置问题，以及对react-router的hash模式或者是history模式都有比较大的影响

　　解决方案： 配置如上的目录结构，把dev的页面放到根目录下，只需配置下dev的资源输出路径，其他的就和本地直接开发web项目一样了。

　　上面的方案说的很简单，明确，但是个人走到这一步，确实碰到了许许多多的坑，也涉及到了一些react-router的解析原理，这里就说下我碰到的坑

　　1. localhost 服务配置

　　以常规想法，web的项目都在同目录（webroot）

　　

 

 

 　　此时，只需要在配置dev-server的publicPath和资源输出路径即可

　　

 　　那么本地服务就跑起来了，当然首页的链接就不是常见的链接，而是localhost:8083/webroot；

　　2.非常规本地服务域名，对react-router的影响

　　　显然，localhost:8083/webroot,多了个目录webroot,从我自己的调试结果来看，对react-router匹配是有影响的。具体的两种模式的影响如下：

　　　1）history模式

　　　　个人理解该模式，就是自己通过window.history.pushState来改变页面url但是不刷新页面，这个特性来实现单页面操控的，即在react-router初始化的时候,在点击router-link或者browserHistory.push时，只需触发window.history.pushState即可改变当前路由

　　　 2）hash模式

　　　　个人理解该模式，这种模式，通过的就是location.hash来改变路由地址，当然即使改变了，本页面也不会出现刷新，也不会出现刷新该页面，出现404错误。

　　　

 

 　　为了弄清楚多一层文件壳子为什么会干扰到react-router得匹配组件，去找他对应得跳转路由时得源码，一步步的追寻调试路由跳转的过程，最终发现react-router也是基于react Dom-diff算法去修改整个dom得，如上图，这里只是触发了一个setState以及参数是新生成得location对象，这里我目前就先止步了，这个应该和路由匹配规则有关，因为目前得状况是路由是/home，匹配不了localhost:8083/webroot/home,另外一种hash模式也不行，只能用模糊匹配，并且是‘/’这个才能匹配到一个页面切仅能匹配到一个。里面具体得react-router和服务域名得匹配待以后有时间再去研究。毕竟这个当时就是为了解决包含文件夹的dev-server问题，后面灵光一闪，想到静态本地开发资源可以放到根目录（那么开发模式就不用多了一层文件夹了），不必要非放到web目录中（虽然显得不分类别整齐），但是能解决这个问题也不算一个好方式，当然这种场景其实在实际开发中基本不回出现把，这也是本人自己业余的项目和自己研究，与大家分享下