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

5.7 react 路由

news 来源：原创 2025/8/16 1:19:19

react 状态管理库 14:20

react 路由（补充） 数据路由
路由hooks
- 路由跳转（方法标签/内置方法）
- 获取路由地址栏信息
- 动态路由实现（多角色权限路由）
redux redux-toolkit 状态管理
antd 组件使用

1.react 路由声明式路由

v7: 数据式路由【推荐】声明式路由

v6: 约定式路由【推荐】配置式路由

main.js

  import { createRoot } from 'react-dom/client'import './index.css'import App from './App'import { BrowserRouter, Routes, Route } from "react-router";import Home from '@/pages/home/Home'import Coding from '@/pages/coding/Coding'import Pins from '@/pages/pins/Pins'import Course from '@/pages/course/Course'import Following from '@/pages/following/Following'import Frontend from "@/pages/frontend/Frontend";createRoot(document.getElementById('root')).render(<BrowserRouter><Routes><Route path="/" element={<App />}><Route   element={<Home/>}><Route index element={<Following/>}></Route><Route path="frontend" element={<Frontend/>}></Route></Route>                </Route></Routes></BrowserRouter>)

2.路由hooks

2.1 跳转页面

通过组件跳转原理重新封装了a 标签
```
  <NavLink to="跳转路径" >Home</NavLink>
```
函数式编程跳转 hooks 跳转

  import { useNavigate } from "react-router";let navigate = useNavigate();navigate(数字)  //前进几页  后退几页navigate('/goods')   //直接跟路径

2.2 获取路由地址栏信息

  import { useLocation } from 'react-router'let location = useLocation()   //{path:'/xxx',hash:'/#/xxx'}

3.外卖管理系统 -项目搭建

技术栈

vite

react19

react-router v7

less [新知识点：模块化css]

axios || Fetch [新知识点：fetch代替axios]

antd [新知识点]

antd charts [新：图表插件]

路由配置

1.创建所有的页面

2.创建路由配置文件 src/router/index.jsx

注意 layout 页面需要反复多次使用

  import { createBrowserRouter } from "react-router";import App from '@/App'import Login from '@/pages/login/Login'import Layout from '@/pages/layout/Layout'import Home from '@/pages/home/Home'import AccountList from '@/pages/account/List'import AccountEdit from '@/pages/account/Edit'import AccountAdd from '@/pages/account/Add'import AccountCenter from '@/pages/account/Center'import Order from "@/pages/order/Order";const router = createBrowserRouter([{path: "/",Component:App,children:[{index:true,Component:Login},{path:"home",Component:Layout,children:[{index:true,Component:Home},]},{path:'account',Component:Layout,children:[{path:'list',Component:AccountList},{path:'add',Component:AccountAdd},{path:'center',Component:AccountCenter},{path:'edit',Component:AccountEdit}]},{path:'order',Component:Layout,children:[{index:true,Component:Order}]}]},])export default router

3.修改main.jsx 的配置

全局注入路由配置

  import { createRoot } from 'react-dom/client'import './index.css'import {RouterProvider} from 'react-router'import router from '@/router'createRoot(document.getElementById('root')).render(<RouterProvider router={router}></RouterProvider>)

4.根页面和一级页面需要进行占位

app.jsx

  import React from 'react'import { Outlet } from 'react-router'export default function App() {return (<><Outlet /></>)}

layout.jsx

  import React from 'react'import { Outlet } from 'react-router'export default function Layout() {return (<><div>顶部</div><div>左侧菜单</div><div><Outlet></Outlet></div></>)}

4.antd 使用

下载安装

  pnpm install antd

使用

  import React from 'react'import { Button , Form, Input } from 'antd';import './index.less'export default function Login() {const onFinish = values => {console.log('Success:', values);};return (<><div className="login"><div className="form-box"><FormonFinish={onFinish}><Form.Itemlabel="账号"name="account"rules={[{ required: true, message: '请输入您的账号' }]}><Input /></Form.Item><Form.Itemlabel="密码"name="password"rules={[{ required: true, message: '请输入密码' }]}><Input.Password /></Form.Item><Form.Item label={null}><Button type="primary" htmlType="submit">登录</Button></Form.Item></Form></div></div></>)}

5.7 react 路由

react 状态管理库 14:20 react 路由（补充） 数据路由路由hooks 路由跳转 （方法标签/内置方法） 获取路由地址栏信息动态路由实现（多角色权限路由） redux redux-toolkit 状态管理 antd 组件使用 1.…...

编程日记 2025/8/16 1:19:19

8. HTML 表单基础

表单是网页开发中与用户交互的核心组件，用于收集、验证和提交用户输入的数据。本文将基于提供的代码素材，系统讲解 HTML 表单的核心概念、常用控件及最佳实践。一、表单的基本结构一个完整的 HTML 表单由以下部分组成： <form action&q…...

编程日记 2025/8/16 1:19:17

遥感数据处理、机器学习建模与空间预测的全流程指南——涵盖R语言（随机森林、XGBoost、SVM等）、特征提取、模型优化及生态学案例分析

随机森林是一种强大的集成学习方法，特别适用于复杂的遥感数据分析。它通过构建多棵决策树并引入随机性，有效降低模型的方差和过拟合风险。在训练过程中，随机森林利用Bootstrap抽样生成多样化的训练集，并在节点分裂时随机选择特征子…...

编程日记 2025/8/15 1:23:07

Android 数据持久化之数据库存储 Room 框架

一、简介 Room 是 Google 推出的 Android 持久层框架，建立在 SQLite 之上，提供了一个抽象层，简化了数据库操作。它通过注解和编译时检查来确保数据操作的正确性。 Room 主要由以下三个组件组成： Entity（实体&#x…...

编程日记 2025/8/16 1:19:14

空间数据分析新趋势：AI 与 ArcGIS Pro 的协同创新

技术点目录 AI（DeepSeek、ChatGPT）大模型介绍及应用AI（DeepSeek、ChatGPT）支持下空间数据处理及分析功能基础AI（DeepSeek、ChatGPT）支持下空间数据选择及读取AI（DeepSeek、ChatGPT）支…...

编程日记 2025/8/16 1:19:12

Oracle OCP认证考试考点详解083系列10

题记： 本系列主要讲解Oracle OCP认证考试考点（题目），适用于19C/21C,跟着学OCP考试必过。 46. 第46题： 题目解析及答案： 查看以下配置： CDB1 和 CDB2 是两个容器数据库。 PDB1 是 CDB1 中的一…...

编程日记 2025/8/16 1:19:10

【linux常用指令】du命令

今天收到通知需要将服务器上的容量大的文件移动到大容量数据盘中。 du -sh */ | sort -h如果你想按大小排序显示文件夹，可以结合 sort 命令。这会按大小从小到大排序显示文件夹。如果想按大小从大到小排序，可以加上 -r 选项。 du -sh */ | sort -h -r...

编程日记 2025/8/16 1:19:08

定义了一个统一返回类，但是没有给Data 导致没有get/set方法，请求一直报错 public class JsonResult<T> {private int code;private String message;private T data;public JsonResult() {}public JsonResult(int code, String message, T data) {…...

编程日记 2025/8/16 1:19:06

MCP Client适配DeepSeek

本文是通过MCP官方的client例子进行修改，适配DeepSeek API. MCP client 先解析一下什么是MCP client。 MCP Client 是 Model Context Protocol（模型上下文协议）架构中的客户端组件，主要负责与 MCP 服务器建立和管理连接。它是一…...

编程日记 2025/8/16 1:19:04

物业设备管理的“多系统协同”模式：ERP、IoT与工单系统如何联动？

在智慧物业快速发展的今天，设备管理已从“被动维修”转向“主动预防”，但许多企业仍面临系统割裂、数据孤岛的困境。ERP系统记录设备台账却难实时监控，IoT设备采集数据却无法联动响应，工单系统处理流程却依赖人工流转——这些痛点…...

编程日记 2025/8/15 23:36:19

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】6.4 时间序列分析（窗口函数处理时间数据）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL时间序列分析：窗口函数处理时间数据实战一、时间序列分析核心场景与窗口函数优势1.1 业务场景需求1.2 窗口函数核心优势二、窗口函数基础&#xff1a…...

编程日记 2025/8/16 1:19:00

数据可视化：艺术与科学的交汇点，如何让数据“开口说话”？

数据可视化：艺术与科学的交汇点，如何让数据“开口说话”？ 数据可视化，是科技与艺术的结合，是让冰冷的数字变得生动有趣的桥梁。它既是科学——讲究准确性、逻辑性、数据处理的严谨性；又是艺术——强调美感…...

编程日记 2025/8/16 1:18:58

IP 风险画像如何实现对恶意 IP 的有效拦截？

IP 风险画像作为一种强大的技术手段，在识别和拦截恶意 IP 方面发挥着至关重要的作用。 IP风险画像技术简介 IP 风险画像技术通过收集和分析 IP 地址的多维度信息，为每个 IP 构建详细的风险评估模型。这些维度包括但不限于 IP 的地理位置、历史访问行…...

编程日记 2025/8/16 1:18:56

B树如何用于磁盘，B+树为如何用于数据库

B树 M阶B树：每个节点最多M个子节点，每个节点最多存M-1个Key-Value值，key以升序排序。构建五阶B树。那么value是干什么的呢。先让我们介绍一下cpu 内存磁盘的关系我们知道了页的概念。B树用于磁盘的读取。Key是对文件进行编号&#xff…...

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

image-classifier开源程序Elixir是使用电脑学习对图像进行分类并从中提取数据或描述其内容，非常不错的图片整理工具

一、软件介绍文末提供程序和源码下载 Elixir 机器学习功能构建一个应用程序，该应用程序执行图像字幕和语义搜索，以使用您的语音查找上传的图像！ 二、为什么做这个程序在构建我们的应用程序时，我们认为 images 这是一种必不…...

编程日记 2025/8/16 1:18:52

HarmonyOS 鸿蒙操作物联网设备蓝牙模块、扫描蓝牙、连接蓝牙和蓝牙通信

01【HarmonyOS 蓝牙】物联网无线传输方案、HarmonyOS蓝牙数据通信之前的准备工作 02【HarmonyOS 蓝牙】配置蓝牙权限检测打开关闭蓝牙扫描蓝牙显示蓝牙设备 03【HarmonyOS 蓝牙】连接蓝牙发现服务获取特征值读取信息写入信息和蓝牙模块交互 04【物联网 Wifi模块…...

编程日记 2025/8/16 1:18:50

STM32开发GPIO

1、什么是GPIO General Purpose lnput Output，即通用输入输出端口，简称GPIO 作用:负责采集外部器件的信息或者控制外部器件工作，即输入输出 2、GPIO特点 1，不同芯片型号，IO口数量可能不一样，可通过选型…...

编程日记 2025/8/16 1:18:47

【机器学习】Logistic 回归

Logistic 回归虽然名字中带有“回归”，但它实际上是一种广泛应用于二分类问题的线性分类算法。 Logistic 回归的核心任务是预测一个样本属于正类的概率，而概率必须在 [ 0 , 1 ] 范围内。 Logistic回归通过将输入特征的线性组合映射到概率空间&…...

编程日记 2025/8/16 1:18:45

ClimateCatcher专用CDS配置教程

文章目录 API获取官网账号注册CDSAPI本地化配置 API获取官网首先需要访问CDS官方网站，点我蓝色字直接到官网how-to-api点我蓝色字直接到官网目前API的网页是这样的账号注册如果有账号的小伙伴可以直接登录自己的账号并跳转到CDSAPI本地化配置，如…...

编程日记 2025/8/16 1:18:43

拆解 Prompt 工程：五大场景驱动 DeepSeek 超越 ChatGPT

同样的模型、不一样的答案，差距往往发生在一行 Prompt 里。本文围绕五大高频实战场景，给出可直接复制的 DeepSeek 提问框架，并穿插《DeepSeek 行业应用大全》中 64 个行业模板精华，帮助读者迅速跑赢 ChatGPT。🌟 剧透…...

编程日记 2025/8/16 1:18:41

【解决方案】CloudFront VPC Origins 实践流程深入解析 —— 安全高效架构的实战之道

目录引言一、VPC Origins 的核心价值（一）安全性提升（二）运维效率优化（三）成本节约（四）全球分发能力的保留二、VPC Origins 的架构解析（一）流量路径设计&…...

编程日记 2025/8/16 1:18:39

软考系统架构设计师系列知识点 —— 黑盒测试与白盒测试（2）

接前一篇文章：软考系统架构设计师系列知识点 —— 黑盒测试与白盒测试（1） 本文内容参考： 黑盒测试和白盒测试详解-CSDN博客软件测试中的各种覆盖（Coverage）详解-CSDN博客特此致谢！ 二、白…...

编程日记 2025/8/15 1:23:07

【背包dp----01背包】例题三------（标准的01背包+变种01背包1【恰好装满背包体积产生的最大价值】）

【模板】01背包题目链接题目描述 : 输入描述: 输出描述: 示例1 输入 3 5 2 10 4 5 1 4输出 14 9说明装第一个和第三个物品时总价值最大，但是装第二个和第三个物品可以使得背包恰好装满且总价值最大。示例2 输入 3 8 12 6 11 8 6 8输出 8 0说明装第三个物…...

编程日记 2025/8/15 12:15:51

设计模式之状态模式

在日常开发中，我们经常会遇到这样的场景：一个对象在不同时刻有不同的状态，不同状态下它的行为也会发生变化。此时，使用大量if...else或switch语句会让代码变得混乱而难以维护。为了更优雅地应对这种问题，状态模式(Stat…...

编程日记 2025/8/16 1:18:32

arXiv论文 MALOnt: An Ontology for Malware Threat Intelligence

文章讲恶意软件威胁情报本体。作者信息作者是老美的，单位是伦斯勒理工学院，文章是2020年的预印本，不知道后来发表在哪里（没搜到，或许作者懒得投稿，也可能是改了标题）。中心思想介绍开源…...

编程日记 2025/8/16 15:57:47

Spark处理过程-转换算子和行动算子

计算时机转换算子转换算子是惰性执行的，这意味着在调用转换算子时，系统不会立即进行数据处理。这种惰性计算的方式可以让 Spark 对操作进行优化，例如合并多个转换操作，减少数据的传输和处理量。行动算子行动算子是立即执行的。…...

编程日记 2025/8/16 1:18:27

使用 pgrep 杀掉所有指定进程

使用 pgrep 杀掉所有指定进程 pgrep 是一个查找进程 ID 的工具，结合 pkill 或 kill 命令可以方便地终止指定进程。以下是几种方法： 方法1：使用 pkill（最简单） pkill 进程名例如杀掉所有名为 “firefox” 的进程&…...

编程日记 2025/8/16 1:18:25

Android学习总结之MMKV（代替SharedPreferences）

Q1：SharedPreferences 为什么会导致 ANR？MMKV 如何从根本上解决？ 高频考察点：Android 主线程阻塞原理、SP 同步 / 异步机制缺陷、MMKV 内存映射技术 SP 导致 ANR 的三大元凶： 同步提交（commit ()&#xf…...

编程日记 2025/8/16 1:18:21

SWiRL：数据合成、多步推理与工具使用

SWiRL：数据合成、多步推理与工具使用在大语言模型（LLMs）蓬勃发展的今天，其在复杂推理和工具使用任务上却常遇瓶颈。本文提出的Step-Wise Reinforcement Learning（SWiRL）技术，为解决这些难题带…...

编程日记 2025/8/16 1:18:19

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】7.2 PostgreSQL与Python数据交互（psycopg2库使用）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL与Python数据交互：psycopg2库实战指南一、引言：数据交互的桥梁1.1 psycopg2核心优势二、环境准备与基础连接2.1 安装配置2.1.1 安装psyco…...

编程日记 2025/8/16 1:18:16

【Prompt工程—文生图】案例大全

目录一、人物绘图二、卡通头像三、风景图四、logo设计图五、动物形象图六、室内设计图七、动漫风格八、二次元图九、日常场景图十、古风神化图十一、游戏场景图十二、电影大片质感本文主要介绍了12种不同类型的文生图技巧，通过加入不同的图像…...

编程日记 2025/8/16 1:18:13

NVM完全指南：安装、配置与最佳实践

发布于 2025年5月7日 • 阅读时间：10分钟 💡 TL;DR: 本文详细介绍了如何完整卸载旧版Node.js，安装NVM，配置阿里云镜像源，以及设置node_global与node_cache目录，打造高效Node.js开发环境。 📋 目…...

编程日记 2025/8/15 23:30:40

成都养老机器人“上岗”，机器人养老未来已至还是前路漫漫？

近日，成都养老机器人“上岗”引发关注，赛博养老这一概念再次成为人们讨论的焦点，究竟赛博养老未来已来，还是仍需漫长等待，引发诸多思考。成都研发的养老机器人“上岗”确实标志着智慧养老领域的又一进步，…...

编程日记 2025/8/16 2:59:35

数据中心第十五次CCF-CSP计算机软件能力认证

总结一下图树算法比如krusal 迪杰斯特拉 prim算法喜欢改变距离定义或者求别的东西而拓扑排序喜欢大模拟本题使用kerusal算法求出最后一条边就可以。 ac代码： #include <iostream> #include <vector> #include <algorithm>using namespac…...

编程日记 2025/8/16 1:18:11

【面试 · 一】vue大集合

目录 vue2 基础属性组件通信全局状态管理 vueX 路由路由守卫 vue3 基础属性组件通信全局状态管理 Pinia 路由路由守卫 vue2、vue3生命周期 setup vue2 基础属性 data：用于定义组件的初始数据，必须是一个函数，返回一个对…...

编程日记 2025/8/15 23:05:03

Java 常用的 ORM框架（对象关系映射)

Java 常用的 ORM（对象关系映射）框架有以下几种，每种都有其特点和使用场景： Hibernate ● 特点： ○ 完整的 ORM 框架，功能强大。 ○ 支持缓存机制（一级缓存、二级缓存）。 ○ 支持多种…...

编程日记 2025/8/16 15:56:01

自动化创业机器人：现状、挑战与Y Combinator的启示

自动化创业机器人：现状、挑战与Y Combinator的启示前言 AI驱动的自动化创业机器人，正逐步从科幻走向现实。我们设想的未来是：商业分析、PRD、系统设计、代码实现、测试、运营，全部可以在monorepo中由AI和人类Co-founder协作完成…...

编程日记 2025/8/15 13:01:36

支持向量机

支持向量机（Support Vector Machine，SVM）是一种有监督的机器学习算法，可用于分类和回归任务，尤其在分类问题上表现出色。下面将从原理、数学模型、核函数、优缺点和应用场景等方面详细介绍。原理支持向量机的基本思…...

编程日记 2025/8/15 18:33:13

华为昇腾910B通过vllm部署InternVL3-8B教程

前言本文主要借鉴：VLLM部署deepseek，结合自身进行整理下载模型 from modelscope import snapshot_download model_dir snapshot_download(OpenGVLab/InternVL3-8B, local_dir"xxx/OpenGVLab/InternVL2_5-1B")环境配置 auto-dl上选择单卡…...

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

ZArchiver解压缩工具：高效解压，功能全面

在使用智能手机的过程中，文件管理和压缩文件的处理是许多用户常见的需求。无论是解压下载的文件、管理手机存储中的文件，还是进行日常的文件操作，一款功能强大且操作简便的文件管理工具都能极大地提升用户体验。今天，我们要介绍的…...

编程日记 2025/8/16 1:18:02

ETL介绍

（一）ETL介绍 “ETL，是英文Extract-Transform-Load的缩写，用来描述将数据从来源端经过抽取（Extract）、转换（Transform）、加载（Load）至目的端的过程。ETL一词较…...

编程日记 2025/8/16 1:18:00

2025.05.07-华为机考第三题300分

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 03. 城市紧急救援队伍协同规划问题描述智慧城市建设中，卢小姐负责设计一套紧急救援队伍协同系统。城市被规划为一个 n n n \times n...

编程日记 2025/8/16 1:17:57

缓存菜品-04.功能测试

一.功能测试 redis中的数据已缓存查询数据时并没有发sql 修改鸡蛋汤价格为5元。缓存数据没有了价格修改成功停售启售是一样的。修改后清理，再次查询又被缓存到redis中。...

编程日记 2025/8/16 1:17:55

跨境电商生死局：动态IP如何重塑数据生态与运营效率

凌晨三点的深圳跨境电商产业园，某品牌独立站运营总监李明（化名）正盯着突然中断的广告投放系统。后台日志显示，过去24小时内遭遇了17次IP封禁，直接导致黑五促销期间损失23%的预期流量。这并非个案——2023年跨境电商行业…...

编程日记 2025/8/16 1:17:53

day 14 SHAP可视化

一、原理——合作博弈论 SHAP（SHapley Additive exPlanations）是一种用于解释机器学习模型预测结果的方法，它基于合作博弈论中的 Shapley 值概念。Shapley 值最初用于解决合作博弈中的利益分配问题。假设有 n 个参与者共同合作完成一项任务并…...

编程日记 2025/8/16 2:59:34

处理PostgreSQL数据库事务死锁过程

查询pg_locks表，获取未得到满足的锁信息： select * from pg_locks where granted is false ; --查询得不到锁的，那就是两个互相等待对方持有的锁查询活动的事务会话进程，和上一步的锁的事务对应起来： select * from …...

编程日记 2025/8/16 2:59:32

大数据、物联网（IoT）、平台架构与设计重构大模型应用

结合大数据、物联网（IoT）、平台架构与设计重构大模型应用，需构建一个数据驱动、实时响应、弹性扩展的智能系统。以下从技术架构、数据流、核心模块设计三个维度展开：一、整体架构设计分层架构（基于云-边-端协同）： [物联网设备层] → [边缘计算层] → [大数据平台层]…...

编程日记 2025/8/16 2:59:31

开发 Chrome 扩展中的侧边栏图标设置实录（Manifest V3）

在开发自己的 Chrome 扩展 Pocket Bookmarks（口袋书签） 的过程中，我遇到了一个看似简单却颇具挑战的问题：如何在扩展的侧边栏显示自定义图标？ 这篇文章记录一下我踩过的坑，以及最终的解决方案。这里说的侧…...

编程日记 2025/8/16 2:59:29

Baumer工业相机堡盟工业相机如何通过BGAPI SDK在Linux系统下设置多个USB相机（C++）

Baumer工业相机堡盟工业相机如何通过BGAPI SDK在Linux系统下设置多个USB相机（C） Baumer工业相机Baumer工业相机BGAPI SDK在Linux系统下设置USB相机的技术背景Linux系统内核 USB 模块内存的修改内存限制的确定使用 GRUB 引导加载程序修改内存限制使用 U-B…...

编程日记 2025/8/16 2:59:27

zst-2001 历年真题知识产权

知识产权 - 第1题发表权有时间限制其他下面3个没有 c 知识产权 - 第2题 bd是财产权 c 知识产权 - 第3题 b 知识产权 - 第4题 d 知识产权 - 第5题 d 知识产权 - 第6题 d 知识产权 - 第7题 d 知识产权 - 第8题 b是国务院发布的 d没有复制权…...

编程日记 2025/8/16 2:59:26