当前位置: 首页 > news >正文

Ant Design+react 路由跳转

今天我们来继续探讨react的路由跳转

首先,创建router文件夹中的index

import { lazy } from "react";
import { Outlet,useRoutes } from 'react-router-dom';
//引入页面,引用了路由懒加载
const One = lazy(() => import('../pages/one'));
const Two = lazy(() => import('../pages/two'));
const Three = lazy(() => import('../pages/three'));
//设置页面的路由路径
const routes = [{path: '/one',element: <One/>,},{path: '/two',element: <Two/>,children: []},{path: '/three',element: <Three/>,}
];
const WrappedRoutes = () => {return useRoutes(routes);};export default WrappedRoutes;

之后就是App.js页面了,我的layout是写在app.js里的,所以要在app.js进行设置

import React, { useState,lazy } from 'react';
import {MenuFoldOutlined,MenuUnfoldOutlined,UploadOutlined,UserOutlined,VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Button, theme } from 'antd';
import WrappedRoutes from './router/index'; // 引入路由表
import { useLocation, useNavigate,Routes, Route } from 'react-router-dom';
const One = lazy(() => import('./pages/one'));
const Two = lazy(() => import('./pages/two'));
const Three = lazy(() => import('./pages/three'));
const { Header, Sider, Content } = Layout;const App: React.FC = () => {const [collapsed, setCollapsed] = useState(false);const {token: { colorBgContainer },} = theme.useToken();const navigate = useNavigate();const { pathname } = useLocation(); // 获取当前urlconst handleClick = (e: any) => {// 获取当前点击事件的key值,key值就是我们给页面配置的路由啦console.log('key', e.key);navigate(e.key,{replace:true}); // 实现跳转}return (<Layout><Sider trigger={null} collapsible collapsed={collapsed}><div className="demo-logo-vertical" /><Menutheme="dark"mode="inline"selectedKeys={[pathname]}onClick={handleClick}   //给侧边栏item设置点击事件defaultSelectedKeys={['1']}items={[{key: '/one',icon: <UserOutlined />,label: 'nav 1',},{key: '/two',icon: <VideoCameraOutlined />,label: 'nav 2',},{key: '/three',icon: <UploadOutlined />,label: 'nav 3',},]}/></Sider><Layout><Header style={{ padding: 0, background: colorBgContainer }}><Buttontype="text"icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}onClick={() => setCollapsed(!collapsed)}style={{fontSize: '16px',width: 64,height: 64,}}/></Header><Contentstyle={{margin: '24px 16px',padding: 24,minHeight: 280,background: colorBgContainer,}}>{/*路由出口 */}<Routes><Route exact path="/one" element={<One />} /><Route exact path="/two" element={<Two />} /><Route exact path="/three" element={<Three />} /></Routes></Content></Layout></Layout>);
};export default App;

到这里还有最重要的一步,因为我们这是的路由懒加载,这个时候跳转是会报错的

一直出现不能读到pathname,从<router>的时候就出现这个问题,那么问题估计出现在<router>这个标签上。找不到路径名,那就是没有找到地址于是我把<router>换成了<BrowserRouter>,就可以了。

import React,{ Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><BrowserRouter>{/* 在使用组件懒加载的时候,在外面套一个react的组件:Suspense ,否则会报错没有  */}<Suspense><App /></Suspense></BrowserRouter></React.StrictMode>
);
reportWebVitals();

最后,在使用路由懒加载的同时,一定要记得使用<Suspense>嵌套,否则还是会报错,切记切记

相关文章:

Ant Design+react 路由跳转

今天我们来继续探讨react的路由跳转 首先&#xff0c;创建router文件夹中的index import { lazy } from "react"; import { Outlet,useRoutes } from react-router-dom; //引入页面&#xff0c;引用了路由懒加载 const One lazy(() > import(../pages/one)); c…...

提高爬虫效率的秘诀之一:合理配置库池数量

在提高爬虫效率的过程中&#xff0c;合理配置库池数量是一个重要的秘诀。通过增加或减少库池的数量&#xff0c;可以有效提升爬虫系统的效率和稳定性。本文将介绍如何合理配置库池数量&#xff0c;以及配置不同数量库池的优缺点&#xff0c;帮助您提高爬虫效率&#xff0c;顺利…...

初学者必看,前端 Debugger 调试学习

1.文章简介&#xff1a; 报错和Bug&#xff0c;是贯穿程序员整个编程生涯中&#xff0c;无法回避的问题。而调试&#xff0c;就是帮助程序员定位问题、解决问题的重要手段&#xff0c;因此调试是每个程序员必备技能。 调试本身可分为两个过程: 定位问题 和 解决问题&#xff0…...

Dubbo—Admin 整体架构与安装步骤

​回顾 Dubbo 服务治理体系的总体架构&#xff0c;Admin 是服务治理控制面中的一个核心组件&#xff0c;负责微服务集群的服务治理、可视化展示等。 Admin 部署架构 总体上来说&#xff0c;Admin 部署架构分为以下几个部分&#xff1a; Admin 主进程&#xff0c;包括服务发现…...

C++11打断线程的几种方式

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pthread_cancel1.代码演示2.两个重要方法1.pthread_setcancelstate2.pthread_setcanceltype 3.资源回收 二、Boost1.看代码2.资源泄露2.资源回收 总结 前言…...

如何提升网站排名和用户体验:优化网站速度

网站的排名和用户满意度直接受到站点内容的加载速度影响深远。通过精心的网站优化&#xff0c;您不仅可以提高排名&#xff0c;还可以提供更出色的用户体验&#xff0c;尽管用户可能不会察觉到您的网站加载得更快&#xff0c;但这是一个非常有意义的改进。在这篇文章中&#xf…...

【Redis】Hash 哈希内部编码方式

Hash 哈希内部编码方式 哈希的内部编码有两种&#xff1a; ziplist&#xff08;压缩列表&#xff09;&#xff1a;当哈希类型元素个数⼩于hash-max-ziplist-entries配置&#xff08;默认512个&#xff09;、同时所有值都⼩于hash-max-ziplist-value配置&#xff08;默认64字节…...

JUC第二十八讲:JUC工具类: Semaphore详解

JUC工具类: Semaphore详解 本文是JUC第二十八讲&#xff0c;JUC工具类: Semaphore详解。Semaphore底层是基于AbstractQueuedSynchronizer来实现的。Semaphore称为计数信号量&#xff0c;它允许n个任务同时访问某个资源&#xff0c;可以将信号量看做是在向外分发使用资源的许可证…...

vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景

vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景 目录 vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景一、问题背景二、解决方法三、示例 一、问题背景 代码环境&#xff1a;vue3 &#xff0…...

【Qt之QTableWidget和QTreeWidget】树悬停、选择样式及表格表头和首行间隔线

QTableWidget设置表头与首行间隔线 win10 实例化QTableWidget后&#xff0c;表格表头和首行中间无间隔线&#xff0c;以下是通过样式表进行设置&#xff1a; // 设置横向表格头的间隔线&#xff0c;可设置四个方向的间隔线,不需要间隔线的可以设置为0px// border-left:0px sol…...

使用余弦算法计算向量相似性

import pandas as pd import numpy as np import openaifrom openai.embeddings_utils import get_embedding, cosine_similarityopenai.api_key sk-???? embedding_model "text-embedding-ada-002" embedding_encoding "cl100k_base" # this the …...

存档&改造【06】Apex-Fancy-Tree-Select花式树的使用误删页数据还原(根据时间节点导出导入)

之前一直想实现厂区-区域-产线之间的级联选取&#xff0c;于是导入插件Apex-Fancy-Tree-Select花式树 存档&#xff06;改造【03】Apex-Fancy-Tree-Select花式树的导入-CSDN博客 现在则是在Oracle Apex中的应用 花式书级联列表展示厂区-区域-产线 想要实现的效果 由厂区>…...

OpenCV7-copyTo截取ROI

OpenCV7-copyTo截取ROI copyTo截取感兴趣区域 copyTo截取感兴趣区域 有时候&#xff0c;我们只对一幅图像中的部分区域感兴趣&#xff0c;而原图像又十分大&#xff0c;如果带着非感兴趣区域一次处理&#xff0c;就会对程序的内存造成负担&#xff0c;因此我们希望从原始图像中…...

OpenCV10-图像直方图:直方图绘制、直方图归一化、直方图比较、直方图均衡化、直方图规定化、直方图反射投影

OpenCV10-图像直方图&#xff1a;直方图绘制、直方图归一化、直方图比较、直方图均衡化、直方图规定化、直方图反射投影 1.直方图的绘制2.直方图归一化3.直方图比较4.直方图均衡化5.直方图规定化&#xff08;直方图匹配&#xff09;6.直方图反向投影 1.直方图的绘制 图像直方图…...

线性回归模型进行特征重要性分析

目的 线性回归是很常用的模型&#xff1b;在局部可解释性上也经常用到。 数据归一化 归一化通常是为了确保不同特征之间的数值范围差异不会对线性模型的训练产生过大的影响。在某些情况下&#xff0c;特征归一化可以提高模型的性能&#xff0c;但并不是所有情况下都需要进行归一…...

hadoop -hive 安装

1.下载hive http://archive.apache.org/dist/hive/hive-3.1.3/apache-hive-3.1.3-bin.tar.gz2.解压/usr/app 目录 tar -zxvf apache-hive-3.1.3-bin.tar.gz -C /usr/app3.设置软连接 ln -s /usr/app/apache-hive-3.1.3-bin /usr/app/hive4.修改/usr/app/hive/conf/hive-env.…...

小迈物联网网关对接串口服务器[Modbus RTU]

很多工控现场&#xff0c;方案中会使用串口服务器采集Modbus RTU的设备&#xff0c;这种情况下一般会在PC机上装上串口服务器厂家的软件来进行数据采集。如果现场不需要PC机&#xff0c;而是通过网关将数据传输到软件平台&#xff0c;如何实现呢&#xff1f; 本文简要介绍小迈网…...

Java版本+企业电子招投标系统源代码+支持二开+招投标系统+中小型企业采购供应商招投标平台

功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为外部供…...

Vue3中reactive, onMounted, ref,toRaw,conmpted 使用方法

import { reactive, onMounted, ref,toRaw,conmpted } from vue; vue3中 reactive &#xff0c;ref &#xff0c; toRaw&#xff0c;watch&#xff0c;conmpted 用法 toRaw 返回原响应式对象 用法&#xff1a; const rowList toRaw(row) reactive:ref: ref和reactive都是V…...

有哪些免费的PPT模板网站,推荐这6个PPT模板免费下载网站!

混迹职场的打工人&#xff0c;或是还在校园的学生党&#xff0c;在日常的工作汇报或课程作业中&#xff0c;必然少不了PPT的影子&#xff0c;而每当提到做PPT&#xff0c;许多人首先会想到&#xff1a;有哪些免费的PPT模板下载网站&#xff1f; 本着辛苦自己&#xff0c;造福所…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...