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

React 第三十八节 Router 中useRoutes 的使用详解及注意事项

news 来源：原创 2025/8/5 18:50:21

前言

useRoutes 是 React Router v6 引入的一个钩子函数，允许通过 JavaScript 对象（而非传统的 JSX 语法）定义路由配置。这种方式更适合复杂路由结构，且代码更简洁易维护。

一、基础使用

1.1、useRoutes路由配置对象

useRoutes 接收一个路由配置数组，每个路由对象包含以下属性：

path: 路由路径（支持动态参数，如 /users/:id）
element: 对应的 React 组件
children: 嵌套子路由
index: 标记默认子路由（类似 <Navigate to="default-child" />）

const routes = [{ path: "/", element: <Home /> },{ path: "/about", element: <About /> },{path: "/users",element: <UsersLayout />,children: [{ index: true, element: <UserList /> }, // 默认子路由{ path: ":userId", element: <UserProfile /> },],},{ path: "*", element: <NotFound /> }, // 404 页面
];

1.2、在组件中使用 useRoutes

将定义好的路由配置传入 useRoutes，并在组件中渲染它：

import { useRoutes } from 'react-router-dom';function App() {const element = useRoutes(routes);return element;
}

二、完整代码案例

2.1、页面组件定义

// Home.jsx
export default function Home() {return <h1>Home Page</h1>;
}// About.jsx
export default function About() {return <h1>About Us</h1>;
}// UsersLayout.jsx
import { Outlet } from 'react-router-dom';
export default function UsersLayout() {return (<div><h2>Users</h2><Outlet /> {/* 子路由渲染位置 */}</div>);
}// UserList.jsx
import { Link } from 'react-router-dom';
export default function UserList() {return (<div><Link to="1">User 1</Link><Link to="2">User 2</Link></div>);
}// UserProfile.jsx
import { useParams } from 'react-router-dom';
export default function UserProfile() {const { userId } = useParams();return <h3>User ID: {userId}</h3>;
}// NotFound.jsx
export default function NotFound() {return <h1>404 - Page Not Found</h1>;
}

2.2、useRoutes路由配置与 App 组件

import { useRoutes } from 'react-router-dom';
import Home from './Home';
import About from './About';
import UsersLayout from './UsersLayout';
import UserList from './UserList';
import UserProfile from './UserProfile';
import NotFound from './NotFound';const routes = [{ path: '/', element: <Home /> },{ path: '/about', element: <About /> },{path: '/users',element: <UsersLayout />,children: [{ index: true, element: <UserList /> },{ path: ':userId', element: <UserProfile /> },],},{ path: '*', element: <NotFound /> },
];function App() {const element = useRoutes(routes);return element;
}export default App;

2.3、入口文件（启用路由useRoutes）

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root')
);

三、关键点说明

3.1、`useRoutes`动态路由参数

使用 :paramName 定义动态路径（如 /users/:userId）。
在组件中通过 useParams() 获取参数值。
useParam是使用详解

3.2、useRoutes嵌套路由

父路由通过指定子路由的渲染位置。
子路由路径会自动继承父路径（如 /users/1 匹配父路径 /users 的子路由 :userId）。

3.3、导航

使用 <Link to="path"> 进行页面跳转，而非 <a> 标签。
示例：在 UserList 组件中跳转到用户详情页。

四、扩展场景

4.1、useRoutes 懒加载组件

结合 React.lazy 和 Suspense 实现按需加载：

const Home = React.lazy(() => import('./Home'));
const routes = [{ path: '/', element: (<Suspense fallback={<div>Loading...</div>}><Home /></Suspense>) },
];

4.2、useRoutes 路由守卫

在路由配置的 element 中加入权限校验逻辑：

const PrivateRoute = ({ children }) => {const isAuthenticated = checkAuth();return isAuthenticated ? children : <Navigate to="/login" />;
};const routes = [{ path: '/dashboard', element: <PrivateRoute><Dashboard /></PrivateRoute> },
];

我们可以用更清晰的 JavaScript 对象管理路由，灵活处理动态参数、嵌套布局和复杂逻辑。

React 第三十八节 Router 中useRoutes 的使用详解及注意事项

前言 useRoutes 是 React Router v6 引入的一个钩子函数，允许通过 JavaScript 对象（而非传统的 JSX 语法）定义路由配置。这种方式更适合复杂路由结构，且代码更简洁易维护。一、基础使用 1.1、useRoutes路由配置对象 useRoute…...

编程日记 2025/8/5 18:50:21

Redhat 系统详解

Red Hat 系统深度解析：从企业级架构到核心组件一、Red Hat 概述：企业级 Linux 的标杆 Red Hat 是全球领先的开源解决方案供应商，其核心产品 Red Hat Enterprise Linux（RHEL） 是企业级 Linux 的黄金标准。RHEL 以稳…...

编程日记 2025/8/1 0:08:36

docker常用命令总结

常用命令含义docker info查看docker 服务的信息-------------------------镜像篇docker pull XXX从官网上拉取名为XXX的镜像docker login -u name登录自己的dockerhub账号docker push XXX将XXX镜像上传到自己的dockerhub账户中（XXX的命名必须是用户名/镜像名&#x…...

编程日记 2025/8/1 3:05:41

【el-admin】el-admin关联数据字典

数据字典使用一、新增数据字典1、新增【图书状态】和【图书类型】数据字典2、编辑字典值二、代码生成配置1、表单设置2、关联字典3、验证关联数据字典三、查询操作1、模糊查询2、按类别查询（下拉框） 四、数据校验一、新增数据字典 1、新增【图书状态…...

编程日记 2025/8/1 3:05:39

component ：is是什么？

问： component ：is是什么？ 是组件？ 那我们是不是就不需要自己创建组件了？还是什么意思？component ：is和什么功能是类似的，同时和类似功能相比对什么时候用component ：is…...

编程日记 2025/8/1 3:05:37

适老化洗浴辅具产业：在技术迭代与需求升级中重塑银发经济新生态

随着中国人口老龄化程度的不断加深，老年群体对于适老化产品的需求日益增长。适老化洗浴辅具作为保障老年人洗浴安全与舒适的关键产品，其发展状况备受关注。深入剖析中国适老化洗浴辅具的发展现状，并探寻助力产业发展的有效路径&#xff0…...

编程日记 2025/8/5 18:50:20

『Python学习笔记』ubuntu解决matplotlit中文乱码的问题！

ubuntu解决matplotlit中文乱码的问题！ 文章目录 simhei.ttf字体下载链接：http://xiazaiziti.com/210356.html将字体放到合适的地方 sudo cp SimHei.ttf /usr/share/fonts/(base) zkfzkf:~$ fc-list | grep -i "SimHei" /usr/local/share/font…...

编程日记 2025/8/1 3:05:33

从AI到新能源：猎板PCB的HDI技术如何定义高端制造新标准？

2025年，随着AI服务器、新能源汽车、折叠屏设备等新兴领域的爆发式增长，高密度互连（HDI）电路板成为电子制造业的“必争之地”。HDI板凭借微孔、细线宽和高层间对位精度，能够实现电子设备的高集成化与微型化，…...

编程日记 2025/8/1 3:05:31

汽车制造行业的数字化转型

嘿，大家好！今天来和大家聊聊汽车制造行业的数字化转型，这可是当下非常热门的话题哦！ 随着科技的飞速发展，传统的汽车制造行业正经历着一场深刻的变革。数字化技术已经不再是“锦上添花”，而是车企能否在未…...

编程日记 2025/8/1 3:05:29

Redis 常见数据类型

Redis 常见数据类型一、基本全局命令详解与实操 1. KEYS 命令功能：按模式匹配返回所有符合条件的键（生产环境慎用，可能导致阻塞）。语法： KEYS pattern 模式规则： h?llo：匹配 hello, ha…...

编程日记 2025/8/1 3:05:27

【计算机网络-传输层】传输层协议-TCP核心机制与可靠性保障

编程日记 2025/8/1 3:05:25

对golang中CSP的理解

概念： CSP模型，即通信顺序进程模型，是由英国计算机科学家C.A.R. Hoare于1978年提出的。该模型强调进程之间通过通道（channel）进行通信，并通过消息传递来协调并发执行的进程。CSP模型的核心思想是“不要通过…...

编程日记 2025/8/1 3:05:23

嵌入式openharmony标准系统中HDF框架底层原理分析

1、案例简介该程序是基于OpenHarmony标准系统编写的基础外设类：简易HDF驱动。 2、基础知识 2.1、OpenHarmony HDF开发简介 HDF（Hardware Driver Foundation）驱动框架，为驱动开发者提供驱动框架能力，包括驱动加载、驱动服务管理、驱动消息机制和配置管理。旨在构建统一…...

编程日记 2025/8/1 3:05:21

238.除自身以外数组的乘积

给你一个数组，求出第 i 个元素以外的数组元素的乘积，不能使用除法，且时间复杂度O(n), 对于一个数，如果知道了前缀元素的乘积和后缀元素的乘积，就知道了这个元素以外的数组元素的乘积，所以现在的问题是如何…...

编程日记 2025/8/1 3:05:20

AI文旅|暴雨打造旅游新体验

今年"五一"假期，全国文旅市场迎来爆发式增长，从丈崖瀑布的磅礴水雾到城市商区的璀璨霓虹，从山野民宿的静谧悠然到主题乐园的欢腾喧嚣，处处人潮涌动。在这火热的景象背后，一股“无形之力”正悄然改变旅游体验…...

编程日记 2025/8/1 3:05:18

学习心得《How Global AI Policy and Regulations Will Impact Your Enterprise》Gartner

AI时代来临，然而与之对应的是海量的数据的安全性和合规性如何保障，如何平衡个人与智能体的利益，恰巧，最近Gartner发布了《How Global AI Policy and Regulations Will Impact Your Enterprise》，我们就其中的观点一起进行探讨。战略规划假设我们首先关注的是关键的战略…...

编程日记 2025/8/5 18:50:19

JAVA将一个同步方法改为异步执行

目的： 这么做的目的就是为了使一个高频率执行的方法能不阻塞整个程序，将该方法丢入到线程池中让线程去做异步执行，既提高了程序整体运行速度，也使得在高并发环境下程序能够更加健壮（同步执行可能会使得请求堆积以致系…...

编程日记 2025/8/1 3:05:14

对遗传算法思想的理解与实例详解

目录一、概述二、实例详解 1）问题描述与分析 2）初始化种群 3）计算种群适应度 4）遗传操作 5）基因交叉操作 6）变异操作三、计算结果四、总结一、概述遗传算法在求解最优解的问题中最为常用&a…...

编程日记 2025/8/1 3:05:12

数据可视化大屏——物流大数据服务平台（二）

代码分析： 物流大数据平台代码分析这是一个基于 Bootstrap 和 ECharts 构建的物流大数据平台前端页面，设计采用了经典的三栏布局，主要展示河南省及全国的物流数据可视化内容。下面从多个维度进行分析： 1. 页面结构分析整体采…...

编程日记 2025/8/1 3:05:10

MindSpore框架学习项目-ResNet药物分类-构建模型

目录 2.构建模型 2.1定义模型类 2.1.1 基础块ResidualBlockBase ResidualBlockBase代码解析 2.1.2 瓶颈块ResidualBlock ResidualBlock代码解释 2.1.3 构建层构建层代码说明 2.1.4 定义不同组合(block，layer_nums)的ResNet网络实现 ResNet组建类代码解析…...

编程日记 2025/8/1 3:05:08

ChatTempMail - AI驱动的免费临时邮箱服务

在当今数字世界中，保护在线隐私的需求日益增长。ChatTempMail应运而生，作为一款融合人工智能技术的新一代临时邮箱服务，它不仅提供传统临时邮箱的基本功能，还通过AI技术大幅提升了用户体验。核心功能与特性 1. AI驱动的智能邮件…...

编程日记 2025/8/1 3:05:06

(leetcode) 力扣100 9.找到字符串中所有字母异位词(滑动窗口)

题目给定两个字符串 s 和 p，找到 s 中所有 p 的异位词的子串，返回这些子串的起始索引。不考虑答案输出的顺序。数据范围 1 < s.length, p.length < 3 * 104 s 和 p 仅包含小写字母样例示例 1: 输入: s "cbaebabacd", p &quo…...

编程日记 2025/8/1 3:05:04

深入了解 Stable Diffusion：AI 图像生成的奥秘

一、引言 AI 艺术与图像生成技术的兴起改变了我们创造和体验视觉内容的方式。在过去几年里，深度学习模型已经能够创造出令人惊叹的艺术作品，这些作品不仅模仿了人类艺术家的风格，甚至还能创造出前所未有的新风格。在这个领域，Sta…...

编程日记 2025/8/5 18:50:20

场外期权平值期权实值期权虚值期权有什么区别？收益如何计算？

期权汇场外期权按价值状态分为平值、虚值、实值期权。 01｜实值期权对于看涨期权而言，如果行权价格低于标的市场价格，则该期权处于实值状态；对于看跌期权，如果行权价格高于标的市场价格，则处于实值状态…...

编程日记 2025/8/1 3:05:00

微软系统红帽系统网络故障排查：ping、traceroute、netstat

在微软（Windows）和红帽（Red Hat Enterprise Linux，RHEL）等系统中，网络故障排查是确保系统正常运行的重要环节。 ping、traceroute（在Windows中为tracert）和netstat是三个常用的网络…...

编程日记 2025/8/1 3:04:58

HOT 100 | 【子串】76.最小覆盖子串、【普通数组】53.最大子数组和、【普通数组】56.合并区间

一、【子串】76.最小覆盖子串 1. 解题思路定义两个哈希表分别用于 t 统计字符串 t 的字符个数，另一个sub_s用于统计字符串 t 在 s 的子串里面字符出现的频率。为了降低时间复杂度，定义一个变量t_count用于统计 t 哈希表中元素的个数。哈希表sub_s是一…...

编程日记 2025/8/1 3:04:56

基于CNN的猫狗图像分类系统

一、系统概述本系统是基于PyTorch框架构建的智能图像分类系统，专门针对CIFAR-10数据集中的猫（类别3）和狗（类别5）进行分类任务。系统采用卷积神经网络（CNN）作为核心算法，结合图形用…...

编程日记 2025/8/1 3:04:54

《时序数据库全球格局：国产与国外主流方案的对比分析》

引言时序数据库（Time Series Database, TSDB）是专门用于存储、查询和分析时间序列数据的数据库系统，广泛应用于物联网（IoT）、金融、工业监控、智能运维等领域。近年来，随着大数据和物联网技术的发展&…...

编程日记 2025/8/1 3:04:53

力扣-2.两数相加

题目描述给你两个非空的链表，表示两个非负的整数。它们每位数字都是按照逆序的方式存储的，并且每个节点只能存储一位数字。请你将两个数相加，并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外，这两个数都…...

编程日记 2025/8/1 3:04:51

富乐德传感技术盘古信息 | 锚定“未来工厂”新坐标，开启传感器制造行业数字化转型新征程

在数字化浪潮下，制造业正经历深刻变革。传感器作为智能制造的核心基础部件，正面临着质量精度要求升级、交付周期缩短、成本管控严苛等多重挑战。传统依赖人工纸质管理、设备数据孤岛化的生产模式，已成为制约高端传感器制造突破“高精度、高…...

编程日记 2025/8/1 5:18:35

RT-Thread 深入系列 Part 2：RT-Thread 内核核心机制深度剖析

摘要： 本文从线程管理、调度器原理、中断处理与上下文切换、IPC 同步机制、内存管理五大核心模块出发，深入剖析 RT-Thread 内核实现细节，并辅以源码解读、流程图、时序图与性能数据。目录线程管理与调度器原理 1.1 线程控制块（T…...

编程日记 2025/8/1 3:04:49

uni-app，小程序自定义导航栏实现与最佳实践

文章目录前言为什么需要自定义导航栏？基本实现方案1. 关闭原生导航栏2. 自定义导航栏组件结构3. 获取状态栏高度4. 样式设置内容区域适配跨平台适配要点iOS与Android差异处理常见导航栏效果实现1. 透明导航栏2. 滚动渐变导航栏3. 自定义返回逻辑解决常见问题1. …...

编程日记 2025/8/1 3:04:47

小程序消息订阅的整个实现流程

以下是微信小程序消息订阅的完整实现流程，分为 5个核心步骤和 3个关键注意事项： 一、消息订阅完整流程步骤1：配置订阅消息模板登录微信公众平台进入「功能」→「订阅消息」选择公共模板或申请自定义模板，获取模板ID&#xff…...

编程日记 2025/8/1 3:04:45

istio in action之Gateway流量入口与安全

入口网关，简单来说，就是如何让外部世界和我们精心构建的集群内部服务顺畅地对话。在网络安全领域，有一个词叫流量入口，英文叫Ingress。这指的是那些从我们自己网络之外，比如互联网，发往我们内部网络的流量。…...

编程日记 2025/8/1 3:04:43

LeetCode 1722. 执行交换操作后的最小汉明距离题解

示例： 输入：source [1,2,3,4], target [2,1,4,5], allowedSwaps [[0,1],[2,3]] 输出：1 解释：source 可以按下述方式转换： - 交换下标 0 和 1 指向的元素：source [2,1,3,4] - 交换下标 2 和 3 指向的元…...

编程日记 2025/8/1 3:04:41

区块链详解

1. 引言 1.1 背景在数字化时代，信息的存储、传输和验证面临诸多挑战，如数据篡改、信任缺失、中心化风险等。区块链技术应运而生，作为一种分布式账本技术，它通过去中心化、去信任化、不可篡改等特性，为解决这些问题提…...

编程日记 2025/8/1 3:04:39

申能集团笔试1

目录注意过程注意必须开启摄像头和麦克风只能用网页编程，不能用本地环境可以用Index进行测试过程我还以为是编程，没想到第一次是企业人际关系、自我评价的选择题，哈哈哈有点轻松，哦对他要求不能泄漏题目&#xff0c…...

编程日记 2025/8/1 3:04:37

机器人手臂的坐标变换：一步步计算齐次矩阵过程 [特殊字符]

大家好！今天我们来学习如何计算机器人手臂的坐标变换。别担心，我会用最简单的方式解释这个过程，就像搭积木一样简单！一、理解问题我们有一个机器人手臂，由多个关节组成。每个关节都有自己的坐标系，我们需要计算从世界坐标系(W)到末端执行器(P₃)的完整变换。二、已…...

编程日记 2025/8/1 3:04:35

神经元和神经网络定义

在深度学习中，神经元和神经网络是构成神经网络模型的基本元素。让我们从基础开始，逐步解释它们的含义和作用。 1️⃣ 神经元是什么？ 神经元是神经网络中的基本计算单元，灵感来自于生物神经系统中的神经元。每个人的脑中有数以亿…...

编程日记 2025/8/1 3:04:34

Vue——Axios

一、Axios 是什么 Axios 是一个基于 promise 网络请求库，作用于 node.js 和浏览器中。它是 isomorphic 的 ( 即同一套代码可以运行在浏览器和 node.js 中 ) 。在服务端它使用原生 node.js http 模块 , 而在客户端 ( 浏览端 ) 则使用 XMLHttpRequest…...

编程日记 2025/8/1 5:18:33

力扣：轮转数组

题目给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。例子示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: [5…...

编程日记 2025/8/1 1:55:07

TCP/IP协议的体系结构

文章目录前言数据链路层网络层传输层应用层前言 TCP/IP通信体系主要分为四个层次，从底至上分别为： 数据链路层 >网络层 > 传输层 >应用层该体系的工作原理主要依靠封装与分用的使用完成对信息的传递与解析。 1. 所谓封装，就是上层…...

编程日记 2025/8/1 1:55:05

Vue3 中 ref 与 reactive 的区别及底层原理详解

一、核心区别 1. 数据类型与使用场景 • ref 可定义基本类型（字符串、数字、布尔值）和对象类型的响应式数据。对于对象类型，ref 内部会自动调用 reactive 将其转换为响应式对象。语法特点：需通过 .value 访问或修改数据&#…...

编程日记 2025/8/1 1:55:03

MySQL 与 Elasticsearch 数据一致性方案

MySQL 与 Elasticsearch 数据一致性方案前言一、同步双写（Synchronous Dual Write）🔄二、异步双写（Asynchronous Dual Write）📤三、定时同步（Scheduled Synchronization）&#x1f5…...

编程日记 2025/8/1 1:55:01

参考：about-pytorch 定义ScaledDotProductAttention结构体： use candle_core::{Result, Device, Tensor}; use candle_nn::{Linear, Module, linear_no_bias, VarMap, VarBuilder, ops};struct ScaledDotProductAttention {wq: Linear,wk: Linear,wv: …...

编程日记 2025/8/1 1:54:58

RabbitMQ-运维

文章目录前言运维-集群介绍多机多节点单机多节点多机多节点下载配置hosts⽂件配置Erlang Cookie启动节点构建集群查看集群状态单机多节点安装启动两个节点再启动两个节点验证RabbitMQ启动成功搭建集群把rabbit2, rabbit3添加到集群宕机演示仲裁队列介绍raft算法协议 raft基…...

编程日记 2025/8/1 1:54:56

101 alpha——8 学习

alpha (-1 * rank(((sum(open, 5) * sum(returns, 5)) - delay((sum(open, 5) * sum(returns, 5)),这里我们操作符都明白，现在来看金融意义金融意义里层是这个 (sum(open, 5) * sum(returns, 5)) - delay((sum(open, 5) * sum(returns, 5)), 10 这里是两个相减…...

编程日记 2025/8/1 1:54:54

YOLOv1模型架构、损失值、NMS极大值抑制

文章目录前言一、YOLO系列v11、核心思想2、流程解析二、损失函数1、位置误差2、置信度误差3、类别概率损失三、NMS（非极大值抑制）总结YOLOv1的优缺点前言 YOLOv1（You Only Look Once: Unified, Real-Time Object Detection）由…...

编程日记 2025/8/1 1:54:52

webpack代理天地图瓦片

1.安装 npm install http-proxy-middleware --save-dev2.webpack代理 const { createProxyMiddleware } require(http-proxy-middleware);module.exports {devServer: {port: 8080, // 改为你需要的端口https: false, // 如果你启用了 https，这里要对应before(a…...

编程日记 2025/8/1 1:54:49

RabbitMQ-高级特性1

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言消息确认机制介绍手动确认方法代码前言代码编写消息确认机制的演示自动确认automanual 持久化介绍交换机持久化队列持久化消息持久化持久化代码持久化代码演示…...

编程日记 2025/8/1 1:54:47

前言