BrowserRouter HashRouter在React中的区别和作用（实用干货）

最新推荐文章于 2024-03-25 11:57:13 发布
最新推荐文章于 2024-03-25 11:57:13 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： Js React 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rick_and_mode/article/details/108328353
版权
Js 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
React
5 篇文章 0 订阅
订阅专栏

React BrowserRouter和HashRouter的区别

BrowserRouter：h5路由（history API）
HashRouter：哈希路由

主要区别

BrowserRouter 和 HashRouter 都可以实现前端路由的功能

BrowserRouter 实现的是单页面的路由切换
HashRouter 实现的是全局路由切换

从原理上

HashRouter在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter，和散列没关系哦））

而BrowserRouter使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。

从用法上

BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信，而HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。

下面是利用BrowserRouter实现单页面切换

先在src下的文件下创建Router.js 在里面创建路由
在这里插入图片描述

然后在App.js 主文件引入路由
在这里插入图片描述
然后在创建几个子组件方便我们的演示效果
Home页面是展示的单页面切换的路由
About就是我们需要展示的子组件
Home.js
在这里插入图片描述

About.js 展示页面
在这里插入图片描述
看看最后的完成效果
在这里插入图片描述

外下羊.
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈react-router HashRouter和BrowserRouter的使用
08-28
本篇文章主要介绍了浅谈react-router HashRouter和BrowserRouter的使用，具有一定的参考价值，有兴趣的可以了解一下
browser-router:用于单页浏览器应用程序的简单路由器
06-05
浏览器路由器 用于单页浏览器应用程序的简单路由器。 为什么 这是一种抽象路由的努力，以便应用程序可以在客户端上使用与服务器上类似的路由器。 服务器副本尚未构建。 安装 npm install --save browser-router 用 > var router = require('browser-router'); 应用程序接口 路线（路径，参数，标题） > router.route('/login', { next: '/secret' }, 'Log In'); undefined 使路由器执行路由。 这会执行浏览器 pushState 来更改 URL 和参数，同时保持客户端应用程序运行。 onRoute（处理程序） router.onRoute(function myHandler(route, params, title) { // handle this
BrowserRouter、HashRouter、MemoryRouter 以及Vue router、React router 区别
最新发布
知识点沉淀包括不限于前端
03-25 1183
BrowserRouter、HashRouter、MemoryRouter区别是啥 Vue router Reactrouter
React——react-router路由（基本使用）
CC_Waiting的博客
08-17 439
一个路由就是一个映射关系key为路径，value可能是function或componenreact-router的理解react的一个插件库专门用来实现一个SPA的应用基于react的项目基本都会用到此库。
react-router-dom中的BrowserRouter和HashRouter
go
06-20 1369
如果前端使用了，每次改变路由时，会向服务器发送请求，因为服务器未配置对应的路径指向对应的文件，自然导致出现的情况.(对于初始化页面,即路由为/时,不会发送请求)因此在使用需要再加一层服务器配置(node/Nginx),让前端发送的请求映射到对应的文件上.由于hashRouter会在路径上添加，而后面的所有都不会发送到服务器端，即对于服务器而言，路径依旧是，路由切换在前端完成。但是官方会更推荐使用browserRouter，貌似是因为其构建于H5的History API，比起hashRouter，它多出了更多
react 路由基本用法
weixin_41793221的博客
11-25 164
react 路由基本用法 前言 : 假设你有react基础 试着记住 以下概念 : HashRoter 定义哈希路由整体的容器标签 Link 单个标签，定义路由的链接，通过“to”属性来定义链接地址 Route 单个标签，定义组件的容器标签，通过“path”定义和Link的to属性对应的地址，component属性定义链接对应的组件 Switch 多个Route标签外面的容器标签，如果需要定义...
react router中HashRouter和BrowserRouter的区别和使用场景
程序员良仔
05-08 8182
前言 目录前言一、使用场景二、使用方法三、总结 一、使用场景 二、使用方法 三、总结 你可能感兴趣的文章： vue中组件间通讯的8种方法
# react 中使用路由 router 详解
大家好，我是 ed.
10-26 2267
路由就是一个映射关系（ key: value）。key 为路径， value 可能是 function 或者是 component。我们学习路由的时候会遇到两个经常用的单词router和route。区别是什么呢？router 是全局的路由器对象。route 是当前激活的路由对象。打个比方哈，我们自己家里上网需要路由器吧，router 就相当于家里的 路由器。route 就相当于路由器上面的网线插口或者是那个天线，不能没有 router 就是用 route。明确好界面中的导航部分、展示部分都是哪里。
React学习笔记_React Router 6
qq_20470063的博客
03-10 596
React学习笔记
react-router BrowserRouter刷新 报404问题
北斋先生的博客
06-02 2444
介绍出现问题的原因解决开发模式线上部署node服务器nginx服务器react嵌套路由（分组路由）解决方式 介绍 在开发中我们在使用react官方推荐的react-router的BrowserRouter时候，如果不做特殊处理，当跳转路由之后，刷新浏览器一定会报404的问题。 出现问题的原因 browserHistory 模式下，URL 是指向真实 URL 的资源路径，当通过真实 URL 访问网站的时候（首页），这个时候可以正常加载我们的网站资源，而用户在非首页下手动刷新网页时，由于路径是指向服务器的真实.
react-vue：在React和React Native中运行Vue
02-05
将Vue的用于观察者React组件使用在React应用中运行Vue组件使用在React Native中运行Vue组件React系统由于Vue清晰的分层设计，我们可以轻松地拉出React系统（压缩为9 KB），并驱动React组件渲染。 npm install --...
React key值的作用和使用详解
01-19
在react项目中总会遇到这样一个的坑 这是警告数组遍历子元素要有一个唯一的key值，但是key到底是什么，在代码中到底起了什么作用？ key概述 react中的key属性，它是一个特殊的属性，它的出现不是给开发者用的...
react-wow:在React组件中使用CSS动画
05-14
React WOW Using CSS animation in your react components. 依赖 安装 $ npm install --save react-wow 示例 import React from 'react' import ReactDOM from 'react-dom' import ReactWOW from 'react-wow' const...
React-router( 路由 HashRouter 和 BrowserRouter 模式)
lllllllwj的博客
05-14 5601
react-router 我们使用的是4.+版本，使用的是react-router-dom react-router是3.x的版本 路由的模式有两种 老浏览器提供的 hash模式， 我们称之为： HashRouter H5提供的的 history 模式，我们称之为 BrowserRouter 注意： H5模式的路由需要后端支持 使用路由 在index.js中使用路由模式将组...
nginx中配置react-router参数跳转
weixin_34358092的博客
06-13 523
2019独角兽企业重金招聘Python工程师标准>>> ...
react-router v5使用详解（引入、页面栈、BrowserRouter、Switch、Link、Redirect、Prompt、路由传参、v5和v6区别中文文档）
AIWWY的博客
03-22 2687
目录 引入 项目引入 直接引入 基本使用 BrowserRouter（Router） Switch Link Route path component render exact children Redirect from|to Prompt when message 代码跳转链接 路由传参 withRouter() 示例 match isExact params path url location hash pathname search .
react-router HashRouter和BrowserRouter的使用
热门推荐
落草为寇的海带王
07-27 2万+
官网推荐的是BrowserRouter，但是此方式需要服务器配合，而且有点不好的是重定向只能到首页，无法停留在当前页，具体用法很简单，举例说明。 示例网站（使用HashRouter） HashRouter//react-router要求只只有一个字节点 //router内部的Link和Route会一一匹配，匹配到则加载对应的组件 //to 和 Route 的path是一样的（除了/结尾） //
Reactjs路由BrowserRouter的基本使用完整代码
学亮编程手记
04-06 518
title: React教程。
browserrouter和hashrouter
03-16
BrowserRouter和HashRouter都是React Router库中的路由器组件，用于实现前端路由。 BrowserRouter使用HTML5的history API来实现路由，可以实现无刷新页面跳转，但需要服务器端支持。而HashRouter使用URL的hash值来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值