React 在非组件环境切换路由

我的react-router-dom版本是6.16.0。之前在react中是这样配置路由的

App.jsx

import ReactDOM from 'react-dom/client';
import { HashRouter, Route, Routes } from 'react-router-dom';const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<HashRouter><Routes><Routepath={XXX}element={<Component></Component>}key={XXX} /> </Routes></HashRouter>
);

然后使用axios做接口拦截,当接口的是响应码是10000的时候,跳转到登录页面(10000表示接口返回token过期),但是像上面这样使用路由,该怎么在组件外面(例如axios的逻辑中)做路由跳转呢。

目前看这种方法好像无法做跳转。

可以使用下面的方式做

router/index.jsx

import { createHashRouter } from "react-router-dom";export const router = createHashRouter([{path: "/",element: <Component />,},
]);

App.jsx

import React, { useEffect } from "react";
import { RouterProvider, createHashRouter } from "react-router-dom";
import { router } from "@/router";export default () => {return (<RouterProvider router={router} />);
};

然后如果组件外面想切换路由:

就类似这样:

import { router } from "@/router";router.navigate('/login');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/118973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python实验项目4 :面对对象程序设计

1&#xff1a;运行下面的程序&#xff0c;回答问题。 &#xff08;1&#xff09;说明程序的执行过程&#xff1b; &#xff08;2&#xff09;程序运行结果是什么&#xff1f; # &#xff08;1&#xff09;说明程序的执行过程&#xff1b; # &#xff08;2&#xff09;程序运行…

android开发使用OkHttp自带的WebSocket实现IM功能

一、背景 android app开发经常会有IM需求&#xff0c;很多新手不晓得如何入手&#xff0c;难点在于通讯不中断。其实android发展到今天&#xff0c;很多技术都很完善&#xff0c;有很多类似框架可以实现。例如有&#xff1a;okhttp自带的websocket框架、easysocket等等。本文主…

vite工具官方地址 +前端工具插件

该项目与 Vite 一起提供服务和捆绑。推荐的 IDE 设置是 ** VSCode Volar。 **如果您需要测试组件和网页&#xff0c;请查看赛普拉斯和赛普拉斯组件测试。 有关更多说明&#xff0c;请参见。README.md vite官方地址

如何做一个无符号数识别程序

1.状态分析 我们可以把无符号数分为&#xff1a;整数&#xff0c;带小数&#xff0c;带指数部分三种形式。以此构建一个DFA。首先需识别输入是整数还是小数点&#xff0c;若是整数部分输入然后还要再循环识别一次是否有小数点&#xff0c;最后识别是否有指数部分&#xff0c;指…

Spring学习笔记—JDK动态代理

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Spring专栏 ✨特色专栏&#xff1a; M…

Redis -- 基础知识2

1.Redis客户端介绍 1.基础介绍 Redis是一种客户端-服务器结构的程序&#xff0c;通过网络进行互动 客户端的多种形态 1.自带了命令行客户端&#xff1a;redis-cil 2.图形化界面的客户端&#xff1a;依赖windows系统&#xff0c;连接服务器有诸多限制&#xff0c;不建议使用 3.基…

Redis -- 基础知识1

1.介绍 1.初识Redis Redis&#xff1a;The open source, in-memory data store used by millions of developers as a database, cache, streaming engine, and message broker. in-memory data&#xff1a;在内存中存储&#xff0c;Redis是在分布式系统中存储起作用的 解释&am…

打印机连接网络后怎么安装驱动?

打印机在我们办公和生活中算是比较常见的设备&#xff0c;特别是在上班时需要时常打印各种文件&#xff0c;但是有时电脑上的打印机也会有无法打印的问题&#xff0c;或者新买的打印机需要先安装驱动才能正常打印的。 那么这个时候我们需要先检查电脑上的打印机是否有安装驱动&…

主线程和子线程的区别

在多线程编程中&#xff0c;我们通常会涉及到主线程&#xff08;也称为父线程&#xff09;和子线程&#xff08;也称为工作线程&#xff09;。 1. 主线程&#xff1a;主线程是程序的起点&#xff0c;它负责创建和管理其他线程。主线程通常执行程序的初始化操作&#xff0c;包括…

Kotlin中的嵌套类、内部类、枚举类、密封类、数据类、单例类、伴生对象

在Kotlin中&#xff0c;类可以分为以下几种类型&#xff0c;并使用样例代码进行说明&#xff1a; 嵌套类&#xff08;Nested Class&#xff09;&#xff1a;嵌套类是指可以嵌套在其他类中的类。嵌套类不能直接访问外部类的成员。例如&#xff0c;在下面的代码中&#xff0c;&q…

正点原子嵌入式linux驱动开发——异步通知

上一篇笔记中使用阻塞或者非阻塞的方式来读取驱动中按键值都是应用程序主动读取的&#xff0c;对于非阻塞方式来说还需要应用程序通过poll函数不断的轮询。最好的方式就是驱动程序能主动向应用程序发出通知&#xff0c;报告自己可以访问&#xff0c;然后应用程序再从驱动程序中…

LCR 146. 螺旋遍历二维数组

LCR 146. 螺旋遍历二维数组 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; LCR 146. 螺旋遍历二维数组 https://leetcode.cn/problems/shun-shi-zhen-da-yin-ju-zhen-lcof/description/ 完成情况&#xff1a; 解…

【Leetcode】【每日一题】【简单】2520. 统计能整除数字的位数

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能&#xff0c;轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/count-the-digits-that-divide-a…

LeetCode 面试题 16.03. 交点

文章目录 一、题目二、C# 题解 一、题目 给定两条线段&#xff08;表示为起点 start {X1, Y1} 和终点 end {X2, Y2}&#xff09;&#xff0c;如果它们有交点&#xff0c;请计算其交点&#xff0c;没有交点则返回空值。 要求浮点型误差不超过 10^-6。若有多个交点&#xff08;…

网络安全保险行业面临的挑战与变革

保险业内大多数资产类别的数据可以追溯到几个世纪以前&#xff1b;然而&#xff0c;网络安全保险业仍处于初级阶段。由于勒索软件攻击、高度复杂的黑客和昂贵的数据泄漏事件不断增加&#xff0c;许多网络安全保险提供商开始感到害怕继续承保更多业务。 保险行业 根据最近的路…

【方法】如何给PDF文件添加“打开密码”?

PDF文件可以在线浏览&#xff0c;但如果想要给文件添加“打开密码”&#xff0c;就需要用到软件工具&#xff0c;下面小编分享两种常用的工具&#xff0c;小伙伴们可以根据需要选择。 工具一&#xff1a;PDF编辑器 PDF阅读器一般是没有设置密码的功能模块&#xff0c;PDF编辑器…

python自动化测试(二):xpath获取元素

目录 前置代码 一、什么是xpath方式 二、通过xpath 单组属性名属性值 的方式进行元素定位 三、通过xpath的多组属性进行元素的定位 四、通过xpath文本值的方式进行元素定位 五、通过模糊的文本值方式进行元素定位 前置代码 # codingutf-8 from selenium import webdrive…

python树结构包treelib入门及其计算应用

树是计算机科学中重要的数据结构。例如决策树等机器学习算法设计、文件系统索引等。创建treelib包是为了在Python中提供树数据结构的有效实现。 Treelib的主要特点包括&#xff1a; 节点搜索的高效操作。支持常见的树操作&#xff0c;如遍历、插入、删除、节点移动、浅/深复制…

使用Go语言测试Redis性能

1. 前言 Redis是一个高性能的键值存储数据库&#xff0c;常用于缓存、队列、排行榜等场景。在实际应用中&#xff0c;我们需要对Redis的性能进行测试&#xff0c;以便了解其在不同场景下的表现。本文将介绍如何使用Go语言测试Redis的性能。 2. 环境准备 在开始测试前&#x…

MySQL精髓:如何使用ALL一次找到最大值

题目来自LeetCode 题目 表&#xff1a;Project -------------------- | Column Name | Type | -------------------- | project_id | int | | employee_id | int | -------------------- (project_id, employee_id) 是该表的主键(具有唯一值的列的组合)。 employee_id 是该表…