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

用react实现一个简单的三页应用

news 来源：原创 2025/8/11 11:30:58

下面是一个使用 React Router 的简单示例，演示了如何在 React 应用中实现页面之间的导航。

🛠️ 第一步：使用 Vite 创建项目

npm create vite@latest my-router-app -- --template react
cd my-router-app
npm install

在这里插入图片描述

🚀 第二步：安装 React Router

npm install react-router-dom

在这里插入图片描述

📁 第三步：修改文件结构

创建目录结构如下：

my-router-app/
├─ src/
│  ├─ pages/
│  │  ├─ Home.jsx
│  │  ├─ About.jsx
│  │  └─ User.jsx
│  ├─ App.jsx
│  └─ main.jsx

在这里插入图片描述

✏️ 编辑文件内容如下

src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><App /></React.StrictMode>
);

src/App.jsx

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import User from './pages/User';export default function App() {return (<Router><nav style={{ marginBottom: 20 }}><Link to="/">首页</Link> | <Link to="/about">关于</Link> | <Link to="/user/42">用户42</Link></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/user/:id" element={<User />} /></Routes></Router>);
}

src/pages/Home.jsx

export default function Home() {return <h2>欢迎来到首页！</h2>;
}

src/pages/About.jsx

export default function About() {return <h2>这是关于页面。</h2>;
}

src/pages/User.jsx

import { useParams } from 'react-router-dom';export default function User() {const { id } = useParams();return <h2>用户页面，ID: {id}</h2>;
}

🧪 第四步：运行项目

npm run dev

打开浏览器访问 http://localhost:5173，点击导航链接可以看到不同页面内容，URL 路径也会改变。

在这里插入图片描述

相关文章：

用react实现一个简单的三页应用

下面是一个使用 React Router 的简单示例&#xff0c;演示了如何在 React 应用中实现页面之间的导航。 &#x1f6e0;️ 第一步&#xff1a;使用 Vite 创建项目 npm create vitelatest my-router-app -- --template react cd my-router-app npm install&#x1f680; 第二步&a…...

编程日记 2025/8/11 11:30:58

OCCT中的布尔运算

OCCT 中的布尔运算是其几何建模的核心功能之一&#xff0c;主要用于实体的合并、切割和相交操作。以下是详细介绍及经典示例程序&#xff1a; 一、OCCT布尔运算的核心类 OCCT 通过 BRepAlgoAPI 命名空间下的类实现布尔运算&#xff0c;主要包括&#xff1a; BRepAlgoAPI_Fus…...

编程日记 2025/8/5 5:16:33

SpringBoot的自动配置和起步依赖原理

关于Spring Boot的自动配置和起步依赖&#xff0c;我想结合最新的实现机制来展开说明。先说自动配置——这是Spring Boot最核心的"约定优于配置"思想的落地体现。举个例子&#xff0c;当我们创建一个新的Spring Boot项目时&#xff0c;只要在pom.xml里添加了spring-b…...

编程日记 2025/8/6 22:27:23

沃伦森电气高压动态无功补偿装置助力企业电能优化

在工业生产的复杂电能环境中&#xff0c;电能质量直接影响企业的生产效率和运营成本。XX光伏科技有限公司作为一家快速发展的制造企业&#xff0c;随着生产规模的不断扩大&#xff0c;其内部电网面临功率因数过低、电压波动频繁等问题&#xff0c;导致供电部门罚款增加、设备故…...

编程日记 2025/8/5 5:16:29

VUE——自定义指令

Vue自定义指令概述 Vue自定义指令可以封装一些 dom 操作&#xff0c;扩展额外功能。它们允许开发者直接对DOM元素进行低层次操作&#xff0c;自定义指令可以响应Vue的响应式系统&#xff0c;从而在数据变化时触发相应的DOM更新。 自定义指令语法 自定义指令的常用钩子函数&am…...

编程日记 2025/8/11 5:44:46

Redis协议与异步方式

1.redis pipeline 通过一次发送多次请求命令&#xff0c;为了减少网络传输时间。 注意&#xff1a;pipeline 不具备事务性。 2.redis 事务 事务&#xff1a;用户定义一系列数据库操作&#xff0c;这些操作视为一个完整的逻辑处理工作单元&#xff0c;要么全部执行&#xff0c;…...

编程日记 2025/8/10 21:34:23

systemd vs crontab：Linux 自动化运行系统的全面对比

在 Linux 系统运维和开发中&#xff0c;任务调度与服务管理 是不可或缺的一环。无论是定期备份、日志轮转&#xff0c;还是启动后台服务&#xff0c;自动化机制都能极大地提高系统的可靠性与效率。两种最常用的自动化工具是&#xff1a; crontab&#xff1a;传统的基于时间的任…...

编程日记 2025/8/5 7:22:18

Centos离线安装mysql、redis、nginx等工具缺乏层层依赖的解决方案

Centos离线安装mysql、redis、nginx等工具缺乏层层依赖的解决方案 引困境yum-utils破局 引 前段时间&#xff0c;有个项目有边缘部署的需求&#xff0c;一台没有的外网的Centos系统服务器&#xff0c;需要先安装jdk&#xff0c;node&#xff0c;mysql&#xff0c;reids&#xf…...

编程日记 2025/8/5 7:22:16

观测云：安全、可信赖的监控观测云服务

引言 近日&#xff0c;“TikTok 遭欧盟隐私监管机构调查并处以 5.3 亿欧元”一案&#xff0c;再次引发行业内对数据合规等话题的热议。据了解&#xff0c;仅 2023 年一年就产生了超过 20 亿美元的 GDPR 罚单。这凸显了在全球化背景下&#xff0c;企业在数据隐私保护方面所面临…...

编程日记 2025/8/6 14:20:33

el-table计算表头列宽，不换行显示

1、在utils.js中封装renderHeader方法 2、在el-table-column中引入&#xff1a; 3、页面展示&#xff1a;...

编程日记 2025/8/5 7:22:12

多智能体学习CAMEL-调用api

可选模型范围 在ModelScope中的模型库中选择推理 API-Inference &#xff0c;里面的模型都可以选择&#xff0c;我们可以体验到最新的使用DeepSeek-R1数据蒸馏出的Llama-70B模型。 1.2.2 使用API调用模型 这里我们使用CAMEL中的ChatAgent模块来简单调用一下模型&#xff0c;…...

编程日记 2025/8/6 14:32:01

奥威BI：AI+BI深度融合，重塑智能AI数据分析新标杆

在数字化浪潮席卷全球的今天&#xff0c;企业正面临着前所未有的数据挑战与机遇。如何高效、精准地挖掘数据价值&#xff0c;已成为推动业务增长、提升竞争力的核心议题。奥威BI&#xff0c;作为智能AI数据分析领域的领军者&#xff0c;凭借其创新的AIBI融合模式&#xff0c;正…...

编程日记 2025/8/5 7:22:09

SM2Utils NoSuchMethodError: org.bouncycastle.math.ec.ECFieldElement$Fp.＜init

1&#xff0c;报错图示 2&#xff0c;报错原因&#xff1a; NoSuchMethodError 表示运行时找不到某个方法&#xff0c;通常是编译时依赖的库版本与运行时使用的库版本不一致。 错误中的 ECFieldElement$Fp. 构造函数参数为 (BigInteger, BigInteger)&#xff0c;说明代码期望使…...

编程日记 2025/8/8 11:02:24

Spring Boot 中 MongoDB @DBRef注解适用什么场景？

在 Spring Boot 中使用 MongoDB 时&#xff0c;DBRef 注解提供了一种在不同集合&#xff08;collections&#xff09;的文档之间建立引用关系&#xff08;类似于关系型数据库中的外键&#xff09;的方式。它允许你将一个文档的引用存储在另一个文档中&#xff0c;并在查询时自动…...

编程日记 2025/8/8 3:39:49

PDF生成模块开发经验分享

在日常的项目开发中&#xff0c;PDF文档的生成是一个常见的需求。无论是用于申报单、审批结果通知书还是其他业务相关的文档输出&#xff0c;一个高效且灵活的PDF生成功能都是不可或缺的。本文将基于我使用Java&#xff08;Spring Boot&#xff09;和iText库开发PDF生成模块的经…...

编程日记 2025/8/10 11:22:24

Music AI Sandbox：打开你的创作新世界

AI 和音乐人的碰撞 其实&#xff0c;Google 早在 2016 年就启动了一个叫 Magenta 的项目&#xff0c;目标是探索 AI 在音乐和艺术创作上的可能性。一路走来&#xff0c;他们和各种音乐人合作&#xff0c;终于在 2023 年整出了这个 Music AI Sandbox&#xff0c;并且通过 YouTub…...

编程日记 2025/8/8 20:19:10

RISC-V入门资料

以下是获取 RISC-V 相关资料的权威渠道和推荐资源&#xff0c;涵盖技术文档、开发工具、社区支持等&#xff1a; 1. 官方资料 RISC-V 国际基金会官网 https://riscv.org 核心文档&#xff1a;ISA 规范&#xff08;包括基础指令集&#xff08;RV32I/RV64I&#xff09;、扩展指令…...

编程日记 2025/8/5 7:21:59

私服与外挂：刑事法律风险的深度剖析

首席数据官高鹏律师团队编著 在当今数字化时代&#xff0c;网络游戏产业蓬勃发展&#xff0c;然而与之相伴的私服与外挂现象却屡禁不止&#xff0c;且其背后隐藏着严重的刑事法律风险。作为一名律师&#xff0c;有必要在此对私服与外挂相关的刑事问题进行深入解读&#xff0c;以…...

编程日记 2025/8/5 7:21:57

sherpa-ncnn：Endpointing（断句规则）

更多内容&#xff1a;XiaoJ的知识星球 目录 1. Endpointing (端点)1.1 规则11.2 规则21.3 规则3 1. Endpointing (端点) 我们有三条端点检测规则。如果激活了其中任何一个&#xff0c;我们假设检测到终端节点。 . 1.1 规则1 规则 1 计算尾随静默的持续时间。如果大于用户指…...

编程日记 2025/8/10 18:35:20

谷云科技iPaaS技术实践：集成平台如何解决库存不准等问题

在当今竞争激烈的商业环境中&#xff0c;电商平台、仓库系统以及门店系统之间的数据不同步问题&#xff0c;如同一颗隐形的 “定时炸弹”&#xff0c;严重威胁着企业的生存与发展。尤其是在库存管理方面&#xff0c;订单系统显示商品已售出&#xff0c;但仓库却无货可发&#x…...

编程日记 2025/8/5 7:21:53

负载均衡算法解析（一）NGINX

文章目录 1. 核心数据结构&#xff1a;算法的基石1.1 负载均衡节点结构&#xff1a;定义服务器实体1.2 关键概念阐述&#xff1a;权重 (Weight) 2. NGINX加权轮询算法旨在解决的具体问题深度分析2.1 应对后端服务器间的负载不均衡问题2.2 后端服务健康状态的动态感知与自适应调…...

编程日记 2025/8/5 7:21:51

计算机网络笔记(十六)——3.3使用广播信道的数据链路层

3.3.1局域网的数据链路层 一、核心逻辑架构&#xff08;拓扑结构演变&#xff09; 二、MAC层核心机制 MAC地址结构 以太网帧格式 CSMA/CD工作机制流程 三、关键功能对比表 功能集线器(Hub)交换机(Switch)网桥(Bridge)工作层级物理层数据链路层数据链路层冲突域处理全广播&…...

编程日记 2025/8/9 21:19:55

STM32-模电

目录 一、MOS管 二、二极管 三、IGBT 四、运算放大器 五、推挽、开漏、上拉电阻 一、MOS管 1. MOS简介 这里以nmos管为例&#xff0c;注意箭头方向。G门极/栅极&#xff0c;D漏极&#xff0c;S源极。 当给G通高电平时&#xff0c;灯泡点亮&#xff0c;给G通低电平时&a…...

编程日记 2025/8/9 16:17:45

单片机 + 图像处理芯片 + TFT彩屏 指示灯控件

指示灯控件使用说明 简介 这是一个基于单片机 RA8889/RA6809图形处理芯片的指示灯的控件库&#xff0c;用于在TFT显示屏上显示各种状态的指示灯。该控件支持多种状态显示&#xff0c;包括正常、警告、错误和停止等状态&#xff0c;并支持自定义标签显示。 功能特点 支持多…...

编程日记 2025/8/5 7:21:45

73页最佳实践PPT《DeepSeek自学手册-从理论模型训练到实践模型应用》

这份文档是一份关于 DeepSeek 自学手册的详细指南&#xff0c;涵盖了 DeepSeek V3 和 R1 模型的架构、训练方法、性能表现以及使用技巧等内容。它介绍了 DeepSeek V3 作为强大的 MoE 语言模型在数学、代码等任务上的出色表现以及其训练过程中的创新架构如多头潜在注意力和多 To…...

编程日记 2025/8/5 7:21:43

Python自动化-python基础(上)

一.魔法方法 在 Python 中&#xff0c;魔法方法&#xff08;Magic Methods&#xff09;是一类特殊的方法&#xff0c;以双下划线 __ 开头和结尾 &#xff0c;它们在特定的场景下会被 Python 解释器自动调用&#xff0c;用于实现一些内置的操作行为。 1. 初始化与构造相关 __…...

编程日记 2025/8/5 7:21:41

mysql数据库体验

目录 数据库简介 使用数据库 数据库的基本概念 数据 数据库和数据库表 数据库管理系统和数据库系统 数据库系统发展史 经典数据库 网状模型 层次模型 关系模型 当今主流数据库介绍 关系数据库 非关系型库的基本概念 关系数据库的基本结构 主键与外键 主键 外…...

编程日记 2025/8/7 15:19:59

Python开发系统

以下是一个基于Python和OpenCV的简单图像检测系统开发示例&#xff0c;包含目标检测、颜色检测和边缘检测功能&#xff1a; 一、环境搭建 1. 安装依赖 pip install opencv-python numpy matplotlib 2. 准备测试图片 下载示例图片或使用本地图片&#xff08;如 test.jpg &…...

编程日记 2025/8/5 7:21:38

架空输电线巡检机器人轨迹优化设计

架空输电线巡检机器人轨迹优化 摘要 本论文针对架空输电线巡检机器人的轨迹优化问题展开研究，综合考虑输电线复杂环境、机器人运动特性及巡检任务需求，结合路径规划算法、智能优化算法与机器人动力学约束，构建了多目标轨迹优化模型。通过改进遗传算法与模拟退火算法，有效…...

编程日记 2025/8/5 7:21:36

针对共享内存和上述windows消息机制 在C++ 和qt之间的案例 进行详细举例说明

针对共享内存和上述windows消息机制 在C++ 和qt之间的案例 进行详细举例说明 以下是关于在 C++ 和 Qt 中使用共享内存（QSharedMemory）和 Windows 消息机制（SendMessage / PostMessage）进行跨线程或跨进程通信的详细示例。 🧩 使用 QSharedMemory 进行进程间通信（Qt 示例…...

编程日记 2025/8/5 7:21:34

cursor平替，试试 vscode+cline+openrouter 的方案，还能自定义 mcp-server 教程大纲

一、引言 cursor 工具使用成本高的现状 编程agent好用&#xff0c;解放劳动力&#xff0c;但费用贵 vscodeclineopenrouter Cline 是一款可集成在 IDE 中的 AI 编程助手&#xff0c;支持 OpenAI 和 Ollama 等多种模型&#xff0c;能在 IDE 里自主完成复杂编程任务&#xff0c;…...

编程日记 2025/8/5 7:21:32

Qt实现车载多媒体项目，包含天气、音乐、视频、地图、五子棋功能模块，免费下载源文件！

本文主要介绍项目&#xff0c;项目的结构&#xff0c;项目如何配置&#xff0c;项目如何打包。这篇文章如果对你有帮助请点赞和收藏&#xff0c;谢谢&#xff01;源代码仅供学习使用&#xff0c;如果转载文章请标明出处&#xff01;&#xff08;免费下载源代码&#xff09;&…...

编程日记 2025/8/5 9:31:19

C++ set替换vector进行优化

文章目录 demo代码解释&#xff1a; 底层原理1. 二叉搜索树基础2. 红黑树的特性3. std::set 基于红黑树的实现优势4. 插入操作5. 删除操作6. 查找操作 demo #include <iostream> #include <set>int main() {// 创建一个存储整数的std::setstd::set<int> myS…...

编程日记 2025/8/5 7:21:30

Android学习总结之算法篇八（二叉树和数组）

路径总和 import java.util.ArrayList; import java.util.List;// 定义二叉树节点类 class TreeNode {int val;TreeNode left;TreeNode right;// 构造函数&#xff0c;用于初始化节点值TreeNode(int x) {val x;} }public class PathSumProblems {// 路径总和 I&#xff1a;判…...

编程日记 2025/8/5 7:21:28

正点原子IMX6U开发板移植Qt时出现乱码

移植Qt时出现乱码 1、前言2、问题3、总结 1、前言 记录一下正点原子IMX6U开发板移植Qt时出现乱码的解决方法&#xff0c;方便自己日后回顾&#xff0c;也可以给有需要的人提供帮助。 2、问题 用正点原子IMX6U开发板移植Qt时移植Qt后&#xff0c;sd卡里已经存储了Qt的各种库&…...

编程日记 2025/8/5 7:21:26

算法解密：轮转数组问题全解析

算法解密：轮转数组问题全解析 一、引言 在算法的世界里，数组的操作问题常常考验着我们对数据结构和算法技巧的掌握程度。“轮转数组”问题就是其中一个经典且有趣的题目。它看似简单，却蕴含着多种巧妙的解法。通过深入研究这个问题，我们能更好地理解数组的特性，提升算法思…...

编程日记 2025/8/5 7:21:25

正则化和L1/L2范式

1. 背景与引入 历史与位置 正则化&#xff08;Regularization&#xff09;是机器学习中控制模型复杂度、提升泛化能力的核心手段之一。 L2范式&#xff08;Ridge正则化&#xff09;最早可追溯至20世纪70年代的Tikhonov正则化&#xff0c;用于解决病态线性方程组问题&#xf…...

编程日记 2025/8/5 7:21:22

day05_java中常见的运算符

对字面量或者变量进行操作的符号就是运算符。用运算符把常量或者变量连接起来符合java语法的式子就可以称为表达式。 java中常用的运算符有下面几种 算术运算符 代码示例 public class Demo01Operator {public static void main(String[] args) {int a 3;int b 4;System.o…...

编程日记 2025/8/5 7:21:21

Linux_进程退出与进程等待

一、进程退出 ‌退出场景‌ ‌正常终止‌&#xff1a;代码执行完毕且结果符合预期&#xff08;退出码为 0&#xff09;。‌异常终止‌&#xff1a;运行结果错误&#xff08;退出码非 0&#xff09;或进程被信号强制终止。&#xff08;如 SIGINT 或 SIGSEGV&#xff09;。 ‌退…...

编程日记 2025/8/5 7:21:19

SSM框架（Spring + Spring MVC + MyBatis）整合配置的详细步骤

以下是 SSM框架&#xff08;Spring Spring MVC MyBatis&#xff09;整合配置的详细步骤&#xff0c;适用于 Maven 项目。 &#xff08;一&#xff09;、pom.xml中添加相关依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"ht…...

编程日记 2025/8/5 7:21:17

B. Zero Array（思维）

Problem - 1201B - Codeforces 思路&#xff1a;每次给任意两个不同下表的数减-1&#xff0c;相当于在这个数组总和S上减2&#xff0c;S为奇数则不可能变为0&#xff0c;S为偶数时&#xff0c;一定存在两个序列组成两个S/2&#xff0c;这样每次都是在两个S/2上各减1&#xff0c…...

编程日记 2025/8/6 17:19:27

FPGA_Verilog实现QSPI驱动，完成FLASH程序固化

FPGA_Verilog实现QSPI驱动&#xff0c;完成FLASH程序固化 操作提要 使用此操作模式实现远程升级的原因是当前的FLASH的管脚直接与FPGA相连接&#xff0c;SPI总线并未直接与CPU相连接&#xff0c;那么则需要CPU下发升级指令与将要升级的文件给FPGA&#xff0c;然后在FPGA内部产…...

编程日记 2025/8/5 9:31:16

前端取经路——框架修行：React与Vue的双修之路

大家好，我是老十三，一名前端开发工程师。在前端的江湖中，React与Vue如同两大武林门派，各有千秋。今天，我将带你进入这两大框架的奥秘世界，共同探索组件生命周期、状态管理、性能优化等核心难题的解决之道。无论你是哪派弟子，掌握双修之术，才能在前端之路上游刃有余。准…...

编程日记 2025/8/5 6:29:08

【DBMS学习系列】一、DBMS（数据库管理系统）的存储模型

一、前置知识 1.1 什么是OLAP 和 OLTP？ On-Line Analytical Processing，简称OLAP（联机分析处理），是一种用于处理大规模数据的技术，它提供了一种灵活的分析和查询方式，能够帮助用户从不同维度来分析和理解业务数据。 On-Line Transaction Processing，简称OLTP（联机事…...

编程日记 2025/8/5 6:29:06

Matlab 镍氢电池模型

1、内容简介 Matlab216-镍氢电池模型 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略...

编程日记 2025/8/5 6:29:04

39、.NET GC是什么? 为什么需要GC?

.NET GC是什么&#xff1f; .NET GC&#xff08;Garbage Collector&#xff0c;垃圾回收器&#xff09;是.NET运行时&#xff08;CLR&#xff09;的核心组件&#xff0c;负责自动管理托管堆&#xff08;Managed Heap&#xff09;中的内存分配与释放。其核心工作机制包括&#…...

编程日记 2025/8/7 0:20:56

前端缓存踩坑指南：如何优雅地解决浏览器缓存问题？

浏览器缓存&#xff0c;配置得当&#xff0c;它能让页面飞起来&#xff1b;配置错了&#xff0c;一次小小的上线&#xff0c;就能把你扔进线上 bug 的坑里。你可能遇到过这些情况&#xff1a; 部署上线了&#xff0c;结果用户还在加载旧的 JS&#xff1b;接口数据改了&#xf…...

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

XML语言

XML语言 在开始介绍Mybatis之前&#xff0c;先介绍一下XML语言&#xff0c;XML语言发明最初是用于数据的存储和传输&#xff0c;它是由一个一个的标签嵌套而成 <?xml version"1.0" encoding"UTF-8" ?> <outer> <name>阿伟</name&…...

编程日记 2025/8/8 0:03:52

垃圾回收的三色标记算法

目录 1、介绍 1.1、发展 1.2、基本原理 2、执行过程 2.1、初始标记 (Initial Marking) 2.2、并发标记 (Concurrent Marking) 2.3、重新标记 (Remark) 2.4、垃圾清理阶段 3、并发标记 3.1、浮动垃圾 3.2、漏标 前言 三色标记&#xff08;Tri-color Marking&#xff0…...

编程日记 2025/8/5 6:28:58

紫禁城多语言海外投资理财返利源码带前端uniapp纯工程文件

测试环境&#xff1a;Linux系统CentOS7.6、宝塔、PHP7.2、MySQL5.6&#xff0c;根目录public&#xff0c;伪静态thinkphp&#xff0c;开启ssl证书 语言&#xff1a;中文简体、英文、越南语、马来语、日语、巴西语、印尼语、泰语 前端是uniapp的源码&#xff0c;我已经把nmp给你…...

编程日记 2025/8/5 6:28:56