一、简介
- 在单页面应用中，如何在切换页面后，不刷新浏览器呢？为了解决这个问题，有两种方法，就是
hash路由模式、history路由模式，而react router的两种路由就是使用这两种路由模式。
二、区别
- HashRouter
- 基于 hash 模式：页面跳转原理是使用了 location.hash、location.replace，和 vue router 的 hash 模式实现一致。
- 比较丑：在域名后，先拼接 /#，再拼接路径，也就是利用锚点，实现路由的跳转。如：http://www.dzm.com/#/xx
- BrowserRouter
- 基于 history 模式：页面跳转原理是使用了 HTML5 为浏览器全局的 history 对象新增了两个 API，包括 history.pushState、history.replaceState，和 vue router 的 history 模式实现一致。
- 更加优雅： 直接拼接路径。如：http://www.dzm.com/xx
- 后端需做请求处理：切换路由后，请求接口路径会发生变化，后端需要配合做处理。
- 兼容：低版本浏览器可能不支持，目前市面上热门浏览器应该都支持了，不是特殊情况可以放心使用。
三、使用场景
- HashRouter
- 项目部署在内网：如 to B 项目、本公司业务人员用的项目等
- BrowserRouter
- 项目部署在公网：如 to C 项目、面向大众的项目，url 路径美观点当然更好，但后端需要做处理，不过目前无论 to 哪基本都选用这种，特殊情况除外。
四、使用
- 安装，附：路由的详细使用
# 默认安装最新版本，当前是 6.x $ npm install --save react-router-dom
index.tsx
import React from 'react' import { // HashRouter as Router, // hash模式 BrowserRouter as Router, // history模式 Route, Switch, } from 'react-router-dom' import Home from '../containers/home' const BasicRouter = () => ( <Router> <Switch> <Route exact path="/" component={Home} /> </Switch> </Router> ) export default BasicRouter
