目录

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
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
拉不动的猪20 分钟前
简单回顾下es6增数组方法
前端·javascript·面试
Alkaid:24 分钟前
解决Long类型前端精度丢失和正常传回后端问题
java·前端·javascript·vue.js
Code额30 分钟前
Vue 框架组件间通信方式
前端·vue.js·前端框架
玖玖passion40 分钟前
即时响应之道:深入浅出Server-Sent Events
前端
无名之逆2 小时前
[特殊字符] Hyperlane:Rust 高性能 HTTP 服务器库,开启 Web 服务新纪元!
java·服务器·开发语言·前端·网络·http·rust
程序饲养员2 小时前
使用React Router 7.5进行静态站点生成(SSG)教程
前端·javascript·react.js
前端极客探险家2 小时前
使用 Vue 3 + Google Maps API 实现定位与路线规划功能
前端·javascript·vue.js
低头专研3 小时前
用 HTML 网页来管理 Markdown 标题序号
前端·html·markdown·markdown标题编号
小妖6663 小时前
html 给文本两端加虚线自适应
前端·javascript·html
阿諪諪3 小时前
Vue Router(1)
前端·javascript·vue.js