react HashRouter 与 BrowserRouter 的区别及使用场景

卡尔特斯2023-09-05 8:32

一、简介

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

js 复制代码

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