React js Router 路由 2, (把写过的几个 app 组合起来)

完整的项目,我已经上传了,资源链接.

起因, 目的:

每次都是新建一个 react 项目,有点繁琐。
刚刚学了路由,不如写一个 大一点的 app ,把前面写过的几个 app, 都包含进去。

这部分感觉就像是, django 里面的 createapps,
一个项目, 包含多个独立的app。

过程, 先看效果图:

在这里插入图片描述

代码 1 , 当前 app 的路由设置
import { Route, Routes, Link } from "react-router-dom";
import Home from "./pages/Home.jsx";
import About from "./pages/About.jsx";
import Books from "./pages/Books.jsx";
import NewBook from "./pages/NewBook.jsx";import TodoApp from "./todoApps/TodoApp.jsx";
import NasaApp from "./nasaApps/NasaApp.jsx";
import FormApp from "./formApps/FormApp.jsx";function App() {return (<>{/* 使用 Link 替代 href */}{/* 这里的名称一定要对应!!! */}{/* 为什么下面这2个不能用? */}{/* 因为最下面的 Routes 中没有添加!  */}<nav className="navbar navbar-dark bg-primary" data-bs-theme="dark"><ul className="nav"><li className="nav-item"><a className="nav-link active" aria-current="page" href="/">Home</a>{/* <Link to="/">Home</Link> */}</li><li className="nav-item"><a className="nav-link" href="/about">About</a></li><li className="nav-item"><a className="nav-link" href="/books">Books</a></li><li className="nav-item"><Link to="/newBook"><a className="nav-link" href="#">NewBook</a></Link></li></ul></nav>{/* <nav><ul><li><Link to="/">Home</Link></li><li><Link to="/books">Books</Link></li><li><Link to="/newBook">NewBook</Link></li><li><Link to="/about">About</Link></li></ul></nav> */}{/* 这里的路径 path="/books",  */}{/* 与上面的 Link 中 to=xxx 对应 */}<Routes><Route path="/" element={<Home />} /><Route path="/books" element={<Books />} /><Route path="/about" element={<About />} /><Route path="/newBook" element={<NewBook />} />{/* 带 id 的路由 , :id 是一个占位符, */}{/* 访问: http://localhost:5173/books/321 */}<Route path="/books/:id" element={<Books />} />{/* 访问其他几个 app  */}<Route path="/todo" element={<TodoApp />} /><Route path="/nasa" element={<NasaApp />} /><Route path="/form" element={<FormApp />} /></Routes></>);
}export default App;

其他几个页面的效果图

todo app

在这里插入图片描述

nasa

在这里插入图片描述

表单 form

在这里插入图片描述

结论 + todo

其实问题还是很多的。

  1. react 自带的标签, <Link>, 如何给这个标签添加 boostrap css 样式
  2. 多个app 组合,复杂度增加,如何排除错误。进一步学习 chrome devtools 使用技巧。

老哥,支持一下啊。

zfb

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

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

相关文章

linux网络编程——UDP编程

写在前边 本文是B站up主韦东山的4_8-3.UDP编程示例_哔哩哔哩_bilibili视频的笔记&#xff0c;其中有些部分博主也没有理解&#xff0c;希望各位辩证的看。 UDP协议简介 UDP 是一个简单的面向数据报的运输层协议&#xff0c;在网络中用于处理数据包&#xff0c;是一种无连接的…

借助大模型将文档转换为视频

利用传统手段将文档内容转换为视频&#xff0c;比如根据文档内容录制一个视频&#xff0c;不仅需要投入大量的时间和精力&#xff0c;而且往往需要具备专业的视频编辑技能。使用大模型技术可以更加有效且智能化地解决上述问题。本实践方案旨在依托大语言模型&#xff08;Large …

JDBC导图

思维歹徒 一、使用步骤 二、SQL注入 三、数据库查询&#xff08;查询&#xff09; 四、数据库写入&#xff08;增删改&#xff09; 五、Date日期对象处理 六、连接池使用 创建连接是从连接池拿&#xff0c;释放连接是放回连接池 七、事务和批次插入 八、Apache Commons DBUtil…

Village Exteriors Kit 中世纪乡村房屋场景模型

此模块化工具包就是你一直在寻找的适合建造所有中世纪幻想村庄和城市建筑所需要的工具包。 皇家园区 - 村庄外饰套件的模型和纹理插件资源包 酒馆和客栈、魔法商店、市政大厅、公会大厅、布莱克史密斯锻造厂、百货商店、珠宝商店、药店、草药师、银行、铠甲、弗莱切、马厩、桌…

这个时代唯一“不变“的又是{变}

这个时代唯一不变的就是“变”&#xff0c;所以每个人都得有规划意识&#xff0c;首先要对自己的价值有清晰的认知&#xff0c;你核心卖点是什么。第二&#xff0c;你取得的成绩是通过平台成就的还是通过自身努力取得的&#xff0c;很多人在一家平台待久了之后&#xff0c;身上…

2022高教社杯全国大学生数学建模竞赛C题 问题一(1) Python代码

目录 问题 11.1 对这些玻璃文物的表面风化与其玻璃类型、纹饰和颜色的关系进行分析数据探索 -- 单个分类变量的绘图树形图条形图扇形图雷达图 Cramer’s V 相关分析统计检验列联表分析卡方检验Fisher检验 绘图堆积条形图分组条形图 分类模型Logistic回归随机森林 import matplo…

在STM32工程中使用Mavlink与飞控通信

本文讲述如何在STM32工程中使用Mavlink协议与飞控通信&#xff0c;特别适合自制飞控外设模块的项目。 需求来源&#xff1a; 1、增稳云台里的STM32单片机需要通过串口接收飞控传来的云台俯仰、横滚控制指令和相机拍照控制指令&#xff1b; 2、自制的有害气体采集器需要接收飞…

[Python可视化]数据可视化在医疗领域应用:提高诊断准确性和治疗效果

随着医疗数据的增长&#xff0c;如何从庞大的数据集中快速提取出有用的信息&#xff0c;成为了医疗研究和实践中的一大挑战。数据可视化在这一过程中扮演了至关重要的角色&#xff0c;它能够通过图形的方式直观展现复杂的数据关系&#xff0c;从而帮助医生和研究人员做出更好的…

专题四_位运算( >> , << , , | , ^ )_算法详细总结

目录 位运算 常见位运算总结 1.基础位运算 2.给一个数 n ,确定它的二进制表示中的第 x 位是 0 还是 1 3.运算符的优先级 4.将一个数 n 的二进制表示的第 x 位修改成 1 5.将一个数n的二进制表示的第x位修改成0 6.位图的思想 7.提取一个数&#xff08;n&#xff09;二进…

【嘉立创EDA】画PCB板中为什么要两面铺铜为GND,不能一面GND一面VCC吗?

在新手画板子铺铜时&#xff0c;经常会铺一面GND一面VCC。但一般情况下我们不会这样铺铜。下面将详细分析为什么要两面铺铜为GND&#xff0c;而不是一面GND一面VCC的原因&#xff1a; 提高散热能力 金属导热性&#xff1a;金属具有良好的导热性&#xff0c;铺铜可以有效分散PCB…

引用和指针的区别(面试概念性题型)

个人主页&#xff1a;Jason_from_China-CSDN博客 所属栏目&#xff1a;C系统性学习_Jason_from_China的博客-CSDN博客 所属栏目&#xff1a;C知识点的补充_Jason_from_China的博客-CSDN博客 概念概述 内存占用&#xff1a; 引用&#xff1a;引用一个变量时&#xff0c;实际上并…

2024 年浙江省网络安全行业网络安全运维工程师项目 职业技能竞赛网络安全运维工程师(决赛样题)

2024年浙江省网络安全行业网络安全运维工程师项目 职业技能竞赛网络安全运维工程师&#xff08;决赛样题&#xff09; 应急响应&#xff1a;1 通过流量分析&#xff0c;找到攻击者的 IP 地址2 找到攻击者下载的恶意文件的 32 位小写 md5 值3 找到攻击者登录后台的 URI4 找到攻击…

攻防世界--->hackme

学习笔记。 下载 查壳。 64ida打开。 进入main&#xff1a; 跟进&#xff1a; 这是密文 咋一看这程序感觉很复杂&#xff0c;很复杂&#xff1a; 脚本&#xff1a; #include <stdio.h> #include <string.h> #include <stdlib.h>int main() {unsigned char …

【数据结构】线段树复杂应用

1.线段树离散化 逆序对 1.1逆序对 题目描述 猫猫 TOM 和小老鼠 JERRY 最近又较量上了&#xff0c;但是毕竟都是成年人&#xff0c;他们已经不喜欢再玩那种你追我赶的游戏&#xff0c;现在他们喜欢玩统计。 最近&#xff0c;TOM 老猫查阅到一个人类称之为“逆序对”的东西&…

小程序开发设计-第一个小程序:创建小程序项目④

上一篇文章导航&#xff1a; 小程序开发设计-第一个小程序&#xff1a;安装开发者工具③-CSDN博客https://blog.csdn.net/qq_60872637/article/details/142219152?spm1001.2014.3001.5501 须知&#xff1a;注&#xff1a;不同版本选项有所不同&#xff0c;并无大碍。 一、创…

5G Multicast/Broadcast Services(MBS) (二) Multicast

这篇是Multicast handling的overview,正文开始。 值得注意的是,对于5MBS multicast,UE只有处于RRC connected和Inactive时,网络侧才可以通过MRB将MBS multicast数据传输到 UE;处于Idle态只能进行MBS broadcast过程。 对于multicast涉及的RNTI有G-RNTI,G-CS-RNTI以及在RRC …

2022高教社杯全国大学生数学建模竞赛C题 问题二(1) Python代码

目录 问题 22.1 依据附件数据分析高钾玻璃、铅钡玻璃的分类规律数据类别编码不平衡数据处理分类模型决策树分类随机森林分类XGBoost分类LightGBM分类Catboost分类基于直方图的梯度提升Histogram-Based Gradient Boosting梯度提升树Gradient Boosting Tree逻辑回归Logistic朴素贝…

在linux用docker部署MySQL失败

Unable to find image mysql:latest locally docker: Error response from daemon: Get "https://registry-1.docker.io/v2/": dial tcp 128.121.243.107:443: i/o timeout. See docker run --help. 从网上找解决问题一直说是镜像问题&#xff0c;我原来的镜像是从自…

vue之我不会

一、计算属性 例子&#xff1a; 注意&#xff1a;调用计算属性时&#xff0c;不可以带括号&#xff0c;那样调用的就是方法&#xff0c;如&#xff1a;以下调用fullName时不可funnName() <div id"root">姓&#xff1a;<input type"text" v-model&…

spring ai整合ollama anythingllm

Windows安装ollama和AnythingLLM 下载安装包 下载上面的安装包ollama&AnythingLLM.zip 解压如下 安装ollama 双击OllamaSetup.exe安装即可&#xff0c;安装完成后再命令行查看 ollama --version 即安装成功 运行模型 常用的模型如下 我们选择常用的llama2 ollama r…