ReactRouter中HashRouter和BrowserRouter的区别

仅我的理解，若有不当请指正

1、从原理上

HashRouter在路径中包含了#，至关于HTML的锚点定位。（# 符号的英文叫hash，因此叫HashRouter，和散列不要紧哦））

而BrowserRouter使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。

2、从用法上

BrowserRouter进行组件跳转时能够传递任意参数实现组件间的通讯，而HashRouter不能(除非手动拼接URL字符串)，所以通常配合Redux使用，实现组件间的数据通讯。

3、生产实践

1.HashRouter

 HashRouter至关于锚点定位，所以不论#后面的路径怎么变化，请求的都至关因而#以前的那个页面。能够很容易的进行先后端不分离的部署(也就是把前端打包后的文件放到服务器端的public或static里)，

由于请求的连接都是ip地址:端口/#/xxxx，所以请求的资源路径永远为/，至关于index.html，而其余的后端API接口均可以正常请求，不会和/冲突，因为先后端不分离也不会产生跨域问题。

缺点就是丑，路径里总有个#，宝宝表示强迫症犯了...

2.BrowserRouter

由于BrowserRouter模式下请求的连接都是ip地址:端口/xxxx/xxxx，所以至关于每一个URL都会访问一个不一样的后端地址，若是后端没有覆盖到路由就会产生404错误。

能够经过加入中间件解决，放在服务器端路由匹配的最后，若是前面的API接口都不匹配，则返回index.html页面。但这样也有一些小问题，由于要求前端路由和后端路由的URL不能重复。

好比商品列表组件叫/product/list，而请求商品列表的API也是/product/list，那么就会访问不到页面，而是被API接口匹配到。

解决方法:

进行先后端分离的部署，好比前端地址ip1:端口1，后端接口地址ip2:端口2，使用Nginx反向代理服务器进行请求分发。前端向后端发起请求的URL为nginx所在的服务器+/api/xxx，经过NGINX的配置文件判断，若是URL以api开头则转发至后端接口，不然转发至前端的地址，访问项目只需访问Nginx服务器便可。