一、简介
- 在单页面应用中，如何在切换页面后，不刷新浏览器呢？为了解决这个问题，有两种方法，就是
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
