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

一、简介

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

二、区别

  • HashRouter

    • 基于 hash 模式:页面跳转原理是使用了 location.hashlocation.replace,和 vue routerhash 模式实现一致。

    • 比较丑:在域名后,先拼接 /#,再拼接路径,也就是利用锚点,实现路由的跳转。如:http://www.dzm.com/#/xx

  • BrowserRouter

    • 基于 history 模式:页面跳转原理是使用了 HTML5 为浏览器全局的 history 对象新增了两个 API,包括 history.pushStatehistory.replaceState,和 vue routerhistory 模式实现一致。

    • 更加优雅: 直接拼接路径。如: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
相关推荐
独立开阀者_FwtCoder1 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->11 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~13 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo14 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末33 分钟前
React——基础
前端·react.js·前端框架
aklry44 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端