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
相关推荐
天生我材必有用_吴用3 分钟前
vue3实战九、vue3+vue-cropper实现头像修改
前端
Sobeit12 分钟前
ES2025 颠覆性 JS 黑科技新特性详解
前端
new_abc18 分钟前
net-snmp添加自定义mib树
服务器·前端·javascript
前端梭哈攻城狮25 分钟前
dify二开示例
前端·后端·python
该用户已不存在27 分钟前
Node.js 真的取代了PHP吗?
前端·后端·node.js
ze_juejin37 分钟前
JavaScript 的事件循环(Event Loop)机制
前端
前端缘梦40 分钟前
从源码到dist:拆解Webpack如何完成前端工程的"基因编译"
前端·webpack
热爱运维的小七1 小时前
中型企业如何用 RUM 技术破解地理分布式用户体验难题?从指标监测到优化实操
前端·网站响应速度·地域访问
程序猿阿伟1 小时前
《从点击到共鸣:论坛前端如何用交互细节编织用户体验》
前端·ux
樱花开了几轉1 小时前
React中的合成事件解释和理解
前端·javascript·react.js