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
相关推荐
陪我一起学编程17 分钟前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
LinXunFeng1 小时前
Flutter - 详情页初始锚点与优化
前端·flutter·开源
GISer_Jing1 小时前
Vue Teleport 原理解析与React Portal、 Fragment 组件
前端·vue.js·react.js
Summer不秃1 小时前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html
coderklaus1 小时前
Base64编码详解
前端·javascript
NobodyDJ2 小时前
Vue3 响应式大对比:ref vs reactive,到底该怎么选?
前端·vue.js·面试
xianxin_2 小时前
CSS Visibility(可见性)
前端
朱程2 小时前
写给自己的 LangChain 开发教程(二):格式化数据 & 提取 & 分类
前端·人工智能
小喷友2 小时前
第5章 高级UI与动画
前端·app·harmonyos
笃行3502 小时前
【实用部署教程】olmOCR智能PDF文本提取系统:从安装到可视化界面实现
前端