react router中HashRouter和BrowserRouter的区别和使用场景

前言

在单页面应用中，如何在切换页面后，不刷新浏览器呢？为了解决这个问题，有两种方法，就是hash路由模式、history路由模式，而react router的两种路由就是使用这两种路由模式，本文就讲讲这两个路由模式

一、区别与特点

HashRouter

①基于hash模式：页面跳转原理是使用了location.hash、location.replace；和vue router的hash模式实现一致
②比较丑：在域名后，先拼接/#，再拼接路径；也就是利用锚点，实现路由的跳转；如：http://www.abc.com/#/xx

BrowserRouter

①基于history模式：页面跳转原理是使用了HTML5为浏览器全局的history对象新增了两个API，包括 history.pushState、history.replaceState；和vue router的history模式实现一致
②更加优雅： 直接拼接路径；如：http://www.abc.com/xx
③后端需做请求处理： 切换路由后，请求接口路径会发生变化，后端需要配合，做处理

二、使用场景

HashRouter

①项目部署在内网：如To B的项目、本公司业务人员用的项目等等

BrowserRouter

①项目部署在公网：如To C的项目、面向大众的项目，url路径美观点当然更好，但后端需要做处理

三、使用方法

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

四、总结

1、根据项目类型，而选择：因为不同的项目需求是不一样的，选择能满足需求的路由模式
2、各有优缺点：hash模式，后端不需要做处理，而history模式，则需要；
3、实现方式不同：hash模式，是以锚点的方式实现路由的跳转，而history模式是使用H5在history对象上新增的API来实现路由的跳转

---

你可能感兴趣的文章：

• fetch二次封装，基于公司项目
• react router路由跳转传参，react-router-dom基本使用+4种传参方式
• React Hook的使用