一、简介
- 在单页面应用中,如何在切换页面后,不刷新浏览器呢?为了解决这个问题,有两种方法,就是
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
哪基本都选用这种,特殊情况除外。
- 项目部署在公网:如
四、使用
-
安装,附:路由的详细使用
sh# 默认安装最新版本,当前是 6.x $ npm install --save react-router-dom
-
index.tsx
jsimport 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