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

一、简介

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

• 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
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18