react react-router-dom中获取自定义参数v6.4版本之后

路由配置, AutnToken 组件作为权限、登录管理

import { createBrowserRouter, Navigate } from 'react-router-dom';
import Layout from '@/layout/index';
import Login from '@/pages/login';
import Page404 from '@/pages/404';import AutnToken from '@/components/authToken';
import { lazy } from 'react';
import withLoading from "@/components/router/withLoading";
import product from './product';
let router1:any=[
{path: '/',element: <Navigate to="/home" replace />,},{path: '/',element: (<AutnToken><Layout /></AutnToken>),children: [{path: 'home',element: withLoading(lazy(() => import("@/pages/home"))),handle: {title: "首页",},},...product,{path: 'userAdmin',element: withLoading(lazy(() => import("@/pages/user"))),children: [{path: 'userList',handle: {title: "用户列表",},element:withLoading(lazy(() => import("@/pages/user/userList"))),},],},],},{path: '/login',element: withLoading(lazy(() => import("@/pages/login"))),},{path: '*',element: withLoading(lazy(() => import("@/pages/404"))),}
]
export const router = createBrowserRouter([...router1]);

main.tsx

import { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.scss'import { BrowserRouter, RouterProvider } from "react-router-dom";
// 添加如下import { Provider } from 'react-redux'
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { ConfigProvider } from 'antd'
// type Locale = ConfigProviderProps['locale'];
import zhCN from 'antd/es/locale/zh_CN';  //引入中文包 
import { PersistGate } from 'redux-persist/integration/react'import {router} from "@/router/index"
import { storeData, persistor } from "@/store"
dayjs.locale('cn');
// 关闭严格模式
ReactDOM.createRoot(document.getElementById('root')!).render(<Provider store={storeData}><PersistGate loading={null} persistor={persistor}><ConfigProvider locale={zhCN}><RouterProvider router={router} /></ConfigProvider></PersistGate></Provider>
);

AutnToken

// components/authToken/index.tsx
import { Navigate, Outlet, useLocation, useMatches } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import { ReactNode } from 'react';
interface AutnTokenProps {children: ReactNode;
}
export default function AutnToken({ children }: AutnTokenProps) {const userData = useSelector((state: RootState) => state.getDataConfig);const { token } = userData;const location = useLocation();console.log(token,"判断是否登录,")if (!token && location.pathname !== '/login') {return <Navigate to="/login" replace />;}
//   判断是否有权  ----
const matches = useMatches();
const metas = matches.map((match:any) => {console.log(match,"路由信息--")})return <>{children}</>;
}

handle {title: ‘商品管理’ 这就是自定义的参数

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

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

相关文章

AI中的Prompt

1. System 作用&#xff1a;设定 AI 的“角色设定”和“行为准则”。 内容&#xff1a;通常是描述 LLM 的身份、语气、行为范围、约束规则。 类似&#xff1a;在大语言模型中是最优先被考虑的提示。 示例&#xff1a; 你是一个专业的商品评价分析助手&#xff0c;请根据用户…

从人工到智能:IACheck如何重构检测报告审核工作流?

从人工到智能&#xff1a;IACheck如何重构检测报告审核工作流&#xff1f; 在当今AI技术迅猛发展的时代&#xff0c;各行各业正经历从“人工驱动”到“智能驱动”的根本性变革。检测认证&#xff08;TIC&#xff09;行业作为关乎质量与安全的重要支柱&#xff0c;也不例外。在…

React事件处理:如何给按钮绑定onClick点击事件?

系列回顾&#xff1a; 在前几篇文章中&#xff0c;我们已经学会了如何使用 State 管理组件的内部数据&#xff0c;以及如何通过 Props 实现父子组件之间的通信。我们的组件现在已经有了“数据”和“外观”。但是&#xff0c;它还像一个只能看的“模型”&#xff0c;无法与用户进…

【机器学习|学习笔记】粒子群优化(Particle Swarm Optimization, PSO)详解,附代码。

【机器学习|学习笔记】粒子群优化&#xff08;Particle Swarm Optimization, PSO&#xff09;详解&#xff0c;附代码。 【机器学习|学习笔记】粒子群优化&#xff08;Particle Swarm Optimization, PSO&#xff09;详解&#xff0c;附代码。 文章目录 【机器学习|学习笔记】粒…

深度剖析:AI 社媒矩阵营销工具,如何高效获客?

在社交媒体营销领域&#xff0c;竞争日益激烈&#xff0c;传统的社媒矩阵运营方式面临诸多挑战。而 AI 社媒矩阵营销工具的出现&#xff0c;正以前所未有的方式重构社媒矩阵的底层架构&#xff0c;为营销人员带来了全新的机遇与变革。接下来&#xff0c;我们将从技术破局、实战…

Spring XML 常用命名空间配置

Spring XML 常用命名空间配置 下面是一个综合性的Spring XML配置样例&#xff0c;展示了各种常用命名空间的使用方式&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans&quo…

UE5场景漫游——开始界面及关卡跳转

UE中实现UMG游戏界面搭建及蓝图控制&#xff0c;点击游戏界面中的按钮实现关卡的跳转效果。 一、游戏界面显示。1.创建UMG&#xff0c;2.搭建UI。3.关卡蓝图控制显示 二、点击按钮之后实现关卡跳转

CSS 外边距合并(Margin Collapsing)问题研究

在 CSS 中&#xff0c;margin-top 属性会导致外部 DIV 移动的现象主要是由于 外边距合并&#xff08;Margin Collapsing&#xff09; 造成的。这是 CSS 盒模型的一个特性&#xff0c;可能会与直觉相悖。 外边距合并的原理 当一个元素&#xff08;如内部 DIV&#xff09;的 ma…

清理电脑C磁盘,方法N:使用【360软件】中的【清理C盘空间】

1、先下载并打开【360安全卫士】&#xff0c;点击如下位置&#xff1a; 之后&#xff0c;可以把这个东西&#xff0c;创建快捷方式到电脑桌面&#xff0c;方便以后使用&#xff1a;

微服务集成seata分布式事务 at模式快速验证

微服务集成Seata分布式事务 本次demo代码地址业务场景&#xff1a;一般用于以下场景&#xff1a;使用 AT 模式的优势&#xff08;适用于快速验证&#xff09;&#xff1a;快速验证建议步骤&#xff1a;注意事项&#xff1a; 工具环境微服务版本选择Nacos 环境搭建与启动nacos 下…

LLM基础5_从零开始实现 GPT 模型

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 设计 LLM 的架构 GPT 模型基于 Transformer 的 decoder-only 架构&#xff0c;其主要特点包括&#xff1a; 顺序生成文本 参数数量庞大&#xff08;而非代码量复杂&#xff09; 大量重复…

Android 中 linux 命令查询设备信息

一、getprop 命令 在 Linux 系统中&#xff0c; getprop 命令通常用于获取 Android 设备的系统属性&#xff0c;这些属性包括设备型号、Android 版本、电池状态等。 1、获取 Android 版本号 adb shell getprop ro.build.version.release2、获取设备型号 adb shell getprop …

26考研 | 王道 | 计算机组成原理 | 六、总线

26考研 | 王道 | 计算机组成原理 | 六、总线 文章目录 26考研 | 王道 | 计算机组成原理 | 六、总线6.1 总线概述1. 总线概述2. 总线的性能指标 6.2 总线仲裁&#xff08;考纲没有&#xff0c;看了留个印象&#xff09;6.3 总线操作和定时6.4 总线标准&#xff08;考纲没有&…

SE(Secure Element)加密芯片与MCU协同工作的典型流程

以下是SE&#xff08;Secure Element&#xff09;加密芯片与MCU协同工作的典型流程&#xff0c;综合安全认证、数据保护及防篡改机制&#xff1a; 一、基础认证流程&#xff08;参数保护方案&#xff09; 密钥预置‌ SE芯片与MCU分别预置相同的3DES密钥&#xff08;Key1、Key2…

数据库——MongoDB

一、介绍 1. MongoDB 概述 MongoDB 是一款由 C 语言编写的开源 NoSQL 数据库&#xff0c;采用分布式文件存储设计。作为介于关系型和非关系型数据库之间的产品&#xff0c;它是 NoSQL 数据库中最接近传统关系数据库的解决方案&#xff0c;同时保留了 NoSQL 的灵活性和扩展性。…

WebSocket 前端断连原因与检测方法

文章目录 前言WebSocket 前端断连原因与检测方法常见 WebSocket 断连原因及检测方式聊天系统场景下的断连问题与影响行情推送场景下的断连问题与影响React 前端应对断连的稳健策略自动重连机制的设计与节流控制心跳机制的实现与保持连接存活连接状态管理与 React 集成错误提示与…

2025年真实面试问题汇总(三)

线上数据库数据丢失如何恢复 线上数据库数据丢失的恢复方法需要根据数据丢失原因、备份情况及数据库类型&#xff08;如MySQL、SQL Server、PostgreSQL等&#xff09;综合处理&#xff0c;以下是通用的分步指南&#xff1a; 一、紧急止损&#xff1a;暂停写入&#xff0c;防止…

Android音视频多媒体开源框架基础大全

安卓多媒体开发框架中&#xff0c;从音频采集&#xff0c;视频采集&#xff0c;到音视频处理&#xff0c;音视频播放显示分别有哪些常用的框架&#xff1f;分成六章&#xff0c;这里一次帮你总结完。 音视频的主要流程是录制、处理、编解码和播放显示。本文也遵循这个流程展开…

安卓上架华为应用市场、应用宝、iosAppStore上架流程,保姆级记录(1)

上架前请准备好apk、备案、软著、企业开发者账号&#xff01;&#xff01;&#xff01;其余准备好app相关的截图、介绍、测试账号&#xff0c;没讲解明白的评论区留言~ 华为应用市场 1、登录账号 打开 华为开发者平台 https://developer.huawei.com/consumer/cn/ 2.登录企…

【Docker】docker 常用命令

目录 一、镜像管理 二、容器操作 三、网络管理 四、存储卷管理 五、系统管理 六、Docker Compose 常用命令 一、镜像管理 命令参数解说示例说明docker pull镜像名:标签docker pull nginx:alpine拉取镜像&#xff08;默认从 Docker Hub&#xff09;docker images-a&#x…