React中在非组件的状态下使用history

最新推荐文章于 2023-03-15 08:00:00 发布
最新推荐文章于 2023-03-15 08:00:00 发布
阅读量1k 收藏 3
点赞数 5
分类专栏： 经验 文章标签： react.js react native javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61135864/article/details/121409456
版权

在react-router-dom中有Router这个包 但是Router没有history属性

Router + HashHistroy = HashRouter

Router + BrowerHistroy = BrowerRouter

安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象

 具体步骤

import { createBrowserHistory } from 'history'
export const history = createBrowserHistory()

然后再<Router>中传入子组件

 然后可以在响应拦截中导入使用 可以直接history.push('/login')

当token失效时 可以在js文件中使用history

 

Argenta99
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
browserHistory和hashHistory
Fuohua的博客
04-11 2782
首先 browserHistory 其实使用的是 HTML5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录；而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录；History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法，所以并没有替换历史记录的功能。但 r...
React-----事件在无状态和有状态组件的使用
qq_46065861的博客
11-09 626
一、在无状态的使用 注意:函数(无状态)组件里面不需要this调用函数 1.直接调用方法 function addNum(){ console.log(111) } //调用 <h2 onClick={addNum}>点击增加数量{num}</h2> 2.间接调用(这是使用了Hook) const [num,setNum]=useState(0) function addNum(){ setNum(num+1) } //通过调用addNum来调用setNum &l
react18 常用总结
weixin_42659644的博客
07-13 456
llllllla
React路由的history对象的插件history的使用介绍
mcYang0929的博客
04-15 9341
在react-router中组件里面的跳转可以用<Link> 但是在组件外面改如何跳转，需要用到react路由的history 1.首先是history的安装： npm install history --save 2.我创建了一个JS文件，方便各个文件引用 history.js import { createBrowserHistory } from 'history...
vue 使用history打包的正确姿势（vue项目以及自己搭建的webpack）
weixin_44441196的博客
04-22 562
直接上代码 import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/index.vue' import Login from '@/pages/login/index.vue' export default new Router ({ mode: 'history', base: '/h5/', // 如果部署路径是https://t-meeting.wicongress.org.c.
React中非组件环境下拿到路由信息----------History
留着鼻涕敲代码
11-19 789
1.如何拿到路由信息， 通常情况下都是在组件情况下通过useHistory拿到路由信息的 但是有个很严重的问题，useHistory这个方法只能只能在组件环境下才能使用，如果非组件将无法使用 2. Router包 与 HashRouter/BrowerRouter的区别 react-router-dom中是有Router这个包，但是它Router 没有history属性 简单理解就是： Router + HashHistroy = HashRouter Router + BrowerHistroy =
详解react如何在组件中获取路由参数
08-30
在React Router中，我们可以在`Route`的`path`属性中使用`:paramName`来定义一个动态参数，例如： ```jsx import List from './component/List'; ``` 这里的`:id`就是一个动态参数，当用户访问`/list/123`这样的...
简单谈谈React中的路由系统
12-10
首先，React Router的核心概念是通过定义路由规则来决定何时以及如何渲染不同的React组件。在React Router v4.1.1中，它利用HTML5的`history` API来同步URL和用户界面的状态。这意味着当用户导航到一个新的URL时，...
react-location-hook:只需在React中使用历史记录
03-13
React Location Hook是一个专门为React应用程序设计的轻量级路由解决方案，它允许开发者仅在React组件内管理页面间的导航，而无需依赖像React Router这样的大型库。这个库的核心是利用React Hooks来实现路由功能，...
react-custom-hooks：教程“如何在React.js中编写和使用自定义钩子”的源代码
02-12
自定义钩子（Custom Hooks）是React 16.8版本引入的一个重要特性，它允许开发者在不创建组件的情况下重用状态逻辑。本教程的源代码是关于如何在React中编写和使用自定义钩子的实践示例。 首先，我们来看`...
手挽手带你学React之React-router4.x的使用
11-30
在实际开发中，React Router 4.x还支持动态路由（dynamic routing），允许在URL中使用占位符（如`:id`），这样可以根据不同的参数值加载不同的数据。此外，它还提供了一些高级特性，如` Prompt`（防止未保存的数据...
Browser 对象所有属性和方法介绍，看这一篇就够了！
酷奇的博客
02-22 638
不过 Anchor 对象表示的是文档中的超链接，Location 对象表示的却是浏览器当前显示的文档的 URL（或位置）。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。除了 URL 属性外，Location 对象的 reload() 方法可以重新装载当前文档，replace() 可以装载一个新文档而无须为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档。
React 中如何在非组件的函数中使用history的hooks函数
u014165391的博客
03-12 250
最近遇到一个问题，针对登陆的token失效时，需要跳转到首页刷新页面。肯定是要跳转到登陆页面让用户重新登陆的，但是React中和Vue不同，跳转依赖于router的hooks函数useHistory.但是在组件中才可以使用history,push()进行跳转，在函数中直接是使用不了的。于是看到这样的解决办法// 针对如何在非组件的函数中使用history的hooks函数。
browserHistory和hashHistory的差别，以及history
热门推荐
qq_29854831的博客
03-21 1万+
原文链接：点击打开链接一：对比这两个方式：    无论是react，dva,还是antd pro，前端路由使用的是react router，所有可以选择两种方式：browserHistory和hashHistory。两者的区别简单来说是对路由方式的处理不一样，hashHistory 是以 # 后面的路径进行处理，通过 HTML 5 History 进行前端路由管理，而 browserHistory...
【Browser】History对象的属性及方法
m0_46533551的博客
03-15 357
【Browser】History对象的属性及方法
React Router预备知识，关于history的那些事
weixin_33755649的博客
07-19 898
原文 如果你想理解React Router，那么应该先理解history。更确切地说，是history这个为React Router提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航，这种对于单页应用至关重要的功能。 npm install --save history 存在三类history，分别时browser...
DvaJs中切换 history 为 browserHistory报错
qq_37881565的博客
12-01 740
DvaJs默认使用的是hashHistory，就会出现后缀/#/,如果我们想要去掉后缀，我们就要使用BrowserHistory 如果我们按照官方文档来实现的话，会出现报错 import createHistory from 'history/createBrowserHistory'; const app = dva({ history: createHistory(), }); 就会出现以下的报错： 这个时候我们只需要按照下面来书写，就可以1解决报错了： import { cre
一文弄懂react-router V5的使用
云中客的博客
04-06 1633
一、基础api 1. Route：是用于声明路由映射到应用程序的组件层，主要参数有用于react-router匹配使用的path，匹配后对应渲染到页面上的component 2. 路由模式选择：hash模式：HashRouter，history模式：BrowserRouter import { BrowserRouter as Router } from 'react-router-dom' 3. switch：只匹配第一个的Route并返回到页面上，如下面的例子，在本地打开项目，假设启动后的路
history库
weixin_45270885的博客
06-29 1109
history对象 该对象提供了一些方法，用于控制或监听地址的变化。 该对象不是window.history，而是一个抽离的对象，它提供统一的API接口，封装了具体的实现 createBrowserHistory 产生的控制浏览器真实地址的history对象 createHashHistory 产生的控制浏览器hash的history对象 createMemoryHistory 产生的控制内存中地址数组的history对象 history对象共同的特点：维护了一个地址栈 第三方库：history
react 在非组件 javascript 中 怎么导航
最新发布
05-25
需要注意的是，在非组件的 JavaScript 中使用 `history` 对象可能需要手动管理状态，因为 `history` 对象本质上只是一个用于管理浏览器历史记录的对象。如果你想要实现更复杂的导航逻辑（比如带参数的导航），可能...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Argenta99

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

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

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

打赏作者

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

抵扣说明：

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

余额充值