持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情
背景
当应用变得复杂的时候，需要分块进行处理和展示。
传统模式下，开发者会把整个应用分成多个页面，然后通过URL进行连接，但是这种方式也有一些问题。
每次切换页面都需要重新发送所有的请求和渲染整个页面，不仅性能上会有影响，同时也会导致整个javascript重新执行，丢失状态。
现代浏览器的性能越来越高，无刷新加载也使用的越加频繁，为了解决每次切换页面都重新渲染的问题，现在推出了一个专门的前端方案SPA。
SPA
SPA（单页面应用），整个应用只加载一个页面（入口页面）。
后续在与用户的交互过程中，通过DOM操作在这个单页上动态生成结构和内容。
使用SPA使项目有更好的用户体验，减少请求、渲染和页面跳转产生的等待与空白。
另外前端在项目中更具重要性，数据和页面内容都由异步请求+DOm操作来完成，前端则更多地去处理业务逻辑。
为什么要使用React-Router
使用SPA和路由有什么关联呢？
路由简单来说就是一个分发规则，后端接收到不同的URL请求会返回给前端不同的视图（页面文件）。
但使用了SPA之后，视图都是在一个页面通过Javascript动态处理的。
这时就需要在前端建立一套路由规则，根据RUL在页面的动态更新DOM来显示不同的视图。
React-Router就是一套前端路由库，在项目中安装好React-Router后，开发者就可以基于React开发单页面多视图的应用。
React-Router 安装和配置
React-Router的安装命令如下： npm i react-router-dom。
WEB前端的Router提供了两种不同的模式<HashRouter/>和<BrowserBouter/>。
HashRouter
HashRouter是基于hash实现的一种路由方式，RUL变化时主要是hash值进行变化。
如：http:// :127.0.0.1:3000/#about,可以看到URL里一定会有一个#号，也就是hash模式，hash模式的好处是一定不会向服务端发送请求，但URL里一定会有一个#号。
BrowserBouter
BrowserBouter则是基于H5 history API的一种方式。
history的URL切换基于history提供的pushState方法，好处是URL和之前直接请求后端的URl没有什么区别，当然问题也同样突出，在部署线上时，要注意直接输入RUL还是会发起后端请求，所以后端一样也要做处理。
在实际开发时，不管采取哪种路由模式，都需要在项目最外层配置好路由，告诉React该项目使用的是哪种路由。
