React 使用两种路由（hash|history）模式 调用实例 createHashHistory、createBrowserHistory 实现跳转页面

最新推荐文章于 2025-09-19 20:36:42 发布
原创 最新推荐文章于 2025-09-19 20:36:42 发布 · 7.6k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js

本文详细介绍了在前端应用中如何通过组件props和独立的历史管理实例进行路由跳转。针对不同的路由模式——hash和history，分别展示了在组件内使用props的history属性以及在request.ts文件中创建和使用history实例的方法，确保了页面状态与URL的同步。内容包括了hash模式和history模式的实例代码，强调了正确匹配路由模式的重要性。

文章目录

一、组件props跳转路由

路由嵌套后我们就可以在嵌套的子组件中使用 props 去调用 history 实现路由跳转
在这里插入图片描述
如下

// 跳转登录页
props.history.push("/login")

在这里插入图片描述

二、在 request.ts 无法获取到 props 的页面调用路由实例实现路由跳转

首先我们还是要分清我们的路由模式

hash（#）: <HashRouter> history（/）: <BrowserRouter>
createHashHistory createBrowserHistory

两个路由各调用两个实例

首先引入

import<
最低0.47元/天 解锁文章
React Router V7使用详解
xiangzhihong8的专栏
04-20 727
作为官方推荐的路由解决方案，React Router提供了丰富的功能集，包括基本的路由导航、嵌套路由、动态路由、路由懒加载、路由鉴权以及基于组件的路由配置、路由参数、通配符等。React Router是React生态系统中最流行的路由解决方案，它允许开发者在单页应用的不同页面之间进行切换，而不需要重新加载整个页面，React Router与React框架深度集成，使得开发者在单页面应用中进行页面切换时变得轻而易举。如果一个路由模式以 /* 结尾，后面的任意字符串都会匹配到，也包括其他的 /。
react学习之hash路由实现原理
关注我！带你一路 "狂飙" 到底！
12-09 809
组件需要在项目首次加载时解析当前的hash值，并且监听hash值的变化，根据hash值，来通知 children 当前的路由地址。2、创建两个组件 home.js 、 setting.js，使用hash路由来实现两个组件的切换。标签包裹，实际上需要达到共享路由当前地址的目的，借助react中的 context 来实现。注：如果需要实现路由嵌套和动态路由，当前的hash地址和组件配置的地址比较就不是使用。事件中解析初始的URL，从而展示进入的页面。组件是根据当前的hash地址判断当前的。
react子组件点击按钮hashRouter路由跳转
react子组件点击按钮hashRouter路由跳转
03-06 5378
关于react使用hashRouter父子组件中子组件点击按钮后路由跳转) HashRouter基本代码 &amp;lt;HashRouter&amp;gt; &amp;lt;Routers history={history}&amp;gt; &amp;lt;Route exact path=&quot;/&quot; component={Index}/&amp;gt; &amp;lt;Route path=&am
React路由之HashHistory以及BrowserHistory
mapbar_front的博客
05-04 4070
在Reacttraining的官方文档中，是这样描述history路由的实现的。 它拥有三个创建history的方法： createBrowserHistory：支持H5的history Api createMemoryHistory：一般React Native会支持这样的history createHashHistory：支持旧浏览器的hash history Api 使用Brows...
react-router v6使用createHashHistory 创建history进行history.push时路由改变页面不渲染
qq_37031892的博客
07-06 1739
问题描述 在我使用history库的createHashHistory创建history对象时，使用history.push进行页面跳转的时候，url 变化，但是页面没有渲染。 解决方法 经查阅是因为push操作只是修改了props里的属性，不会触发页面渲染，还需要监听 history 的变化，手动重新渲染页面。（可参考：https://blog.hyyar.com/2021/11/05/react-router-dom-v6%E7%BB%84%E4%BB%B6%E5%A4%96%E4%BD%BF%E7%9
react使用hashHistory实现类似get方法带参数跳转
01-08
主页router 前一页引入hashHistory import { HashRouter } from 'react-router-dom'; 传参： btnClick() { hashHistory.push({ pathname: '/apartmentReserve/'+yourApartmentId, query: { name:yourApartmentname, price:yourApartmentprice }, }) } 或者通过to 传参： 点击跳转
React 路由
qq_30436011的博客
09-16 907
一、路由模式 我们一直在使用的路由方式是BrowserRouter，也就是浏览器的路由方式，其实React还有几种路由方式： 1、BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式 2、HashRouter：在路径前加入#号成为一个哈希值，Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径 3、MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，因为地址栏没有发生任何变化 4、NativeRouter：经常配合Rea
React18学习笔记(三) ReactRouter--React中的路由,路由导航和传参,嵌套路由,,默认二级路由,404页,路由重定向,hash模式和history模式
最新发布
GAARA
09-19 652
本文介绍了React Router的基本使用方法。首先回顾了前端路由概念，并搭建了React开发环境。然后通过示例演示如何创建简单的路由系统，包括路径与组件的对应关系配置。接着详细讲解了实际开发中的路由配置步骤：创建页面组件、设置路由模块、在入口文件注入路由实例。文章还介绍了路由导航方式（声明式与编程式）、参数传递方法、嵌套路由实现以及默认二级路由设置。最后说明了如何处理404页面和两种路由模式（hash与history）的区别。全文以代码示例为主，帮助开发者快速掌握React Router的核心功能。
深入理解react-router 路由的实现原理
10-17
在 `HashHistory` 中，`location.hash` 的改变用于实现路由跳转，`hashchange` 事件则用来监听哈希值的变化。 当路由发生改变时，`history` 会触发相应的回调，这在 React Router 中通常用于更新组件的状态，从而...
细读 React | React Router 路由切换原理
rita_0567的博客
02-11 1108
2022 北京冬奥会开幕式此前一直在疑惑，明明不触发popstate事件，可为什么 React Router 还能挂载对应路由的组件呢？翻了一下源码，终于知道原因了。
react-hash:React自定义钩子以从URL获取哈希
05-10
React哈希 React自定义钩子以从URL获取哈希值。 目录 安装 npm： npm install react-hash 纱： yarn add react-hash 用法 import React from 'react' ; import { useHash } from 'react-hash' ; const App = ( ) => { const [ hash , setHash ] = useHash ( ) ; return ( < div className = 'App'> < h1> { hash } < / h1 > < input type = 'text' value = { hash } onChange = { ( e ) => setHash ( e .
react-router-dom的使用；react 路由实现的基本原理 和 浅谈前后端路由
FOR 的博客
09-01 640
react 路由学了好久，断断续续的，也开学了。忙这忙那。 呼呼 。终于学完这一章节了 内容有点多，5.1 的相关知识只是浅谈，需要深入了解可以找找其他博文。如果这里有不对请指正啦。 第五章 — react-router 5.1 相关知识 1. 浅谈网页发展 1.1后端渲染阶段 早期网页 早期网页是由 jsp/php 代码开发，基本是html和css 它的请求过程是输入网站后，发送到服务器，服务器会将完整的网页返回，也就是已经渲染完成的网页，包括一些图片资源等。 这个也就是后端渲染，即请求回来的即使渲染.
react-router v6使用createHashHistory进行history.push时，url改变页面不渲染
江一铭
08-16 2783
在我使用history库的createHashHistory创建history对象时，使用history.push进行页面跳转的时候，url 变化，但是页面没有渲染。③创建组件时，函数式组件只需调用函数即可创建组件，而类组件必须先实例化一个对象，然后通过这个实例化对象调用render函数来创建组件。④类组件是用生命周期钩子函数来实现业务逻辑的，而函数式组件使用react Hooks来实现业务逻辑。函数式组件和类组件都能实现相同的效果。方法只能在函数式组件中使用， 在类组件中是不能够使用hooks的。...
react 路由跳转
qq_43141894的博客
09-05 743
import React, { Component } from 'react'; //引入hashHistory import {hashHistory} from 'react-router' class About extends Component{ constructor(props){ super(props) } // 事件执行 ta...
history 源码分析- createHashHistory
止水聊技术
06-10 6682
首先讲讲 hashHistory 是什么。众所周知，在单页应用中，我们常用的两种路由策略是 hashHistory 和 browserHistory。其中 browserHistory ...
[react-router] hashHistory 和 browserHistory 的区别
weixin_34354173的博客
12-06 271
react-router提供了三种方式来实现路由，并没有默认的路由，需要在声明路由的时候，显式指定所使用的路由。 //v1.x <Router/> //v2.0.0 // hash history import { hashHistory } from 'react-router' <Router history={hashHistory} /> brow...
react路由传参和跳转
通俗易懂
05-08 1197
文章目录向路由组件传递参数数据向路由组件传递params参数向路由组件传递search参数向路由组件传递state参数多种路由跳转方式普通组件中使用路由跳转BrowserRouter与HashRouter的区别 向路由组件传递参数数据 向路由组件传递params参数 {/* 向路由组件传递params参数 */} <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> {
Jreact-router项目源码解析与React路由实现
“Jreact-router: react-router”这一项目标题表明该项目是对 React 生态中核心路由库 `react-router` 的一种实现或学习版本，尤其强调了其为“引导的”（即可能是教学性质、源码解析或简化版实现），旨在帮助开发者...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值