什么是React路由

React 路由是一种实现单页面开发的解决方案，使用路由能够在不刷新页面的情况实现页面的跳转。React 路由有私有路由和公开路由的区别，私有路由需要用户被授权访问，公开路由不需要。

React 路由是一个路径到组件或者函数的映射关系，可以根据地址栏的地址变化去匹配相应的组件并展示。

React 路由有 react-router-dom 这个官方维护的组件库来帮助我们处理项目中的路由问题，react-router-dom 是给 web 端使用的路由，有 hash 路由和 h5 路由两种模式，兼容性不同，需要注意版本变化。

HashRouter与BrowserRouter的差异

BrowserRouter和HashRouter都是React Router中的路由组件，但是它们有一些区别。

BrowserRouter使用HTML5的history API来保持UI和URL同步，而HashRouter使用URL的哈希值来保持UI和URL同步。

（1）原理上

HashRouter：使用的是URL的哈希值。（# 符号的英文叫hash，所以叫HashRouter，和散列没关系哦）

BrowserRouter：使用的是H5的historyAPI，不兼容IE9及以下版本。

（2）用法上

BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信

HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。

（3）生产实践上

HashRouter

HashRouter相当于锚点定位，因此不论#后面的路径怎么变化，请求的都相当于是#之前的那个页面。可以很容易的进行前后端不分离的部署(也就是把前端打包后的文件放到服务器端的public或static里)，因为请求的链接都是ip地址:端口/#/xxxx，因此请求的资源路径永远为/，而其他的后端API接口都可以正常请求，不会和/冲突，由于前后端不分离也不会产生跨域问题。

BrowserRouter

因为BrowserRouter模式下请求的链接都是ip地址:端口/xxxx/xxxx，因此相当于每个URL都会访问一个不同的后端地址，如果后端没有覆盖到路由就会产生404错误。

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

解决方法:

进行前后端分离的部署，采用不一样的端口，使用Nginx反向代理服务器进行请求分发。前端向后端发起请求的URL为nginx所在的服务器+/api/xxx，通过NGINX的配置文件判断，如果URL以api开头则转发至后端接口，否则转发至前端的地址，访问项目只需访问Nginx服务器即可。