React+Typescript+react-router 6 创建路由操作
本文我们来看看路由的安装 其实路由的操作没有什么变化 但是还是给大家讲一下
那么我们打开项目
在项目终端输入
npm install --save react-router react-router-dom
安装 一下 react-router 和 react-router-dom

这都是react开发很基本的插件了
不过大家安装前先注意好我的版本 react路由每个版本其实差异都还挺多的

这里 我们在src目录下创建一个文件夹 叫 router
然后 我们在下面创建一个 文件 叫 AppRouter.tsx

AppRouter.tsx组件编写代码如下
import { Route, BrowserRouter as Router, Routes, Outlet } from "react-router-dom";import App from "../App";
export default function AppRouter() {return (<Router><Routes><Route path="/" element={<Outlet />}><Route index element={<App />} /></Route></Routes></Router>);
}
这边 我们声明了一个路由 路径是 / 渲染我们的 App组件
这里需要注意的是 在react-router-dom版本6中,exact属性已经被移除了。
而精准匹配可以通过这个 Outlet 特性来实现
如果你有多个路由 皆可以这样

大概归结为两个点 父组件设置 Outlet 就可以精准匹配 index 会被设置为路径 /
然后 我们找到src下的 index.tsx组件 将原本 App组件的引入位置 换成我们的路由组件

然后 我这边 App组件就顺便写的什么 测试一下效果就好了

然后启动项目

也是没有任何问题
相关文章:
React+Typescript+react-router 6 创建路由操作
本文我们来看看路由的安装 其实路由的操作没有什么变化 但是还是给大家讲一下 那么我们打开项目 在项目终端输入 npm install --save react-router react-router-dom安装 一下 react-router 和 react-router-dom 这都是react开发很基本的插件了 不过大家安装前先注意好我的版…...
前端list.push,封装多个对象
js var fruit [apple, banana];fruit.push(pear);console.log(fruit); // [apple, banana, pear]现在为对象 data1:{addUser: 1,editUser: 1,addTime: null,editTime: 1527410579000,userId: 3,systemNo: mc,userName: zengzhuo,userPassword: e10adc3949ba59abbe56e057f20f88…...
指令延迟隐藏
一、指令延迟隐藏 1. 延迟和延迟隐藏 指令延迟指计算指令从调度到指令完成所需的时钟周期如果在每个时钟周期都有就绪的线程束可以被执行,此时GPU处于满符合状态指令延迟被GPU满负荷计算状态所掩盖的现象称为延迟隐藏延迟隐藏对GPU编程开发很重要,GPU设…...
《React vs. Vue vs. Angular:2023年的全面比较》
🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…...
win10自带wifi共享功能
1、按下【wini】组合键打开windows设置,点击【网络和internet】; 2、按照下图,打开个移动热点,设置名称、密码。...
React如何实现国际化?
目录 一、Redux准备工作 commonTypes.js commonActions.js commonReducer.js rootReducer.js 二、然后定义SelectLang组件 index.js index.less 三、创建语言包 welcomeLocale.js index.js 四、使用 react的入口文件 App.js welcome.js 附 关于如何实现国际…...
netrw模拟nerdtree的go命令连续打开多个文件
vim9自带的文件浏览器netrw功能很强大。过去用惯了nerdtree的我,对netrw的文件操作还要适应一些时间。 使用netrw一段时间后发现它没有nerdtree的go命令的替代操作,今天就自制一个。 一、制作go命令: nerdtree的go命令功能:就是…...
算法通关村第十九关——动态规划高频问题(白银)
算法通关村第十九关——动态规划高频问题(白银) 前言1 最少硬币数2 最长连续递增子序列3 最长递增子序列4 完全平方数5 跳跃游戏6 解码方法7 不同路径 II 前言 摘自:代码随想录 动态规划五部曲: 确定dp数组(dp tabl…...
Matlab如何导入Excel数据并进行FFT变换
如果你发现某段信号里面有干扰,想要分析这段信号里面的频率成分,就可以使用matlab导入Excel数据后进行快速傅里叶变换(fft)。 先直接上使用方法,后面再补充理论知识。 可以通过串口将需要分析的数据发送到串口助手&a…...
华为mate60 上线 媒介盒子多家媒体报道
为什么你的品牌营销不见效?如何能推动品牌破圈?让媒介盒子给你一些启发。本期盒子要跟大家分享地新机上市,数码科技行业企业该如何做线上宣传。 HUAWEI Mate 60系列8月29日官宣发布,出色的拍照功能、强大的性能表现和持久的续航能…...
Java知识总结(持续更新)
一、JDK、JRE、JVM三者之间的关系? 1. **JDK (Java Development Kit)**: JDK 是 Java 开发工具包,它包含了用于开发 Java 应用程序的所有必要工具和库。这包括 Java 编译器(javac)、Java 核心类库、开发工具&#x…...
缓存技术:加速应用,提高用户体验
本文总结前期某个系统中使用到的缓存使用经验—仅此而已,效果还不错。 缓存技术在系统架构设计中扮演着至关重要的角色,它不仅可以显著提高系统的性能,还可以改善用户体验。在本文章中,我们将探讨不同类型的缓存、缓存失效以及缓存淘汰等关键概念,帮助在后期的架构设计中…...
MySQL中分区与分表的区别
MySQL中分区与分表的区别 一、分区与分表的区别 分区和分表是在处理大规模数据时的两种技术手段,尽管它们的目标都是提升系统的性能和数据管理的效率,但它们的实现方式和应用场景略有不同。 1. 分区 分区是将一个大表分割为多个更小的子表,…...
Redis主从复制集群的介绍及搭建
在现代的软件开发中,数据的可靠性和可用性是至关重要的。Redis,作为一个开源的、内存中的数据结构存储系统,以其出色的性能和灵活的数据结构,赢得了开发者们的广泛喜爱。而 Redis 的主从复制功能,更是为我们提供了一种…...
MAC M1芯片安装mounty读写移动硬盘中的文件
因为移动硬盘中的文件是微软公司NTFS格式,MAC只支持自己的APFS或者HFS,与微软的NTFS不兼容,所以需要第三方的软件来支持读写硬盘中的文件,经过一上午的折腾,最终选择安装mounty这个免费的第三方软件 工具网址连接&am…...
原生Js Canvas去除视频绿幕背景
Js去除视频背景 注: 这里的去除视频背景并不是对视频文件进行操作去除背景 如果需要对视频扣除背景并导出可以使用ffmpeg等库,这里仅作播放用所以采用这种方法 由于uniapp中的canvas经过封装,且 uniapp 的 drawImage 无法绘制视频帧画面&…...
Vue知识系列(1)每天10个小知识点
目录 系列文章目录知识点**1. Vue修饰符**的概念、作用、原理、特性、优点、缺点、区别、使用场景**2. 双向数据绑定**的概念、作用、原理、特性、优点、缺点、区别、使用场景**3. MVVM、MVC、MVP** 的概念、作用、原理、特性、优点、缺点、区别、使用场景**4. slot** 的概念、…...
Elasticsearch(三)聚合基本使用
基础概念 bucket 数据分组,一些数据按照某个字段进行bucket划分,这个字段值相同的数据放到一个bucket中。可以理解成Java中的Map<String, List>结构,类似于Mysql中的group by后的查询结果。 metric: 对一个数据分组执行…...
单片机C语言实例:14、音频输出
一、喇叭发声原理 程序实例1: #include<reg52.h> //包含头文件,一般情况不需要改动,头文件包含特殊功能寄存器的定义sbit SPK P1^2; //定义喇叭端口 /*------------------------------------------------函数声明 --------------…...
docker 和 podman的区别
Podman 和 Docker 都是用于容器化应用程序的工具,它们在很多方面非常相似,但也有一些关键区别: 1. 架构和权限: - Docker:Docker 使用守护进程(dockerd)来管理容器,它需要在操作…...
【悬疑言情小说推荐】《血语玫瑰》
《血语玫瑰》国际标准书号:ISBN:978-986-6364-30-3 作者:追月逐花 本书地址:http://e.dangdang.com/products/1901197341.html 每个女孩都期待男友年轻英俊、家境优渥、学识出众,而 “魔鬼” 恰好符合所有条件&…...
手把手教你用Google Cloud VPC流量监控:快速定位高费用虚拟机
谷歌云VPC流量监控实战:精准定位高成本虚拟机的5种方法 当凌晨三点的告警邮件突然弹出"本月云服务账单已超预算30%"时,作为运维负责人的你首先会检查哪个环节?根据2023年FinOps基金会调查报告,意外流量费用已成为云成本…...
二相四线步进电机驱动全解析:从原理到Proteus仿真避坑指南
二相四线步进电机驱动全解析:从原理到Proteus仿真避坑指南 在工业自动化与嵌入式开发领域,步进电机因其精准的位置控制能力成为不可或缺的执行元件。而二相四线制步进电机凭借结构简单、成本低廉的优势,尤其受到电子工程师和创客群体的青睐。…...
用了Qoder写代码飞快,联调时却总因字段不一致返工,问题出在哪?
发版前夜,前端字段对不上后端接口,联调卡了整晚。这种场景在 AI Coding 普及后并不罕见,不少团队用了 Qoder 觉得生成快、跑通快,可一旦要改需求,系统就僵住了。看似工具背锅,其实根子往往不在速度…...
浏览器自动化:OpenClaw+GLM-4.7-Flash爬取数据并生成报告
浏览器自动化:OpenClawGLM-4.7-Flash爬取数据并生成报告 1. 为什么选择OpenClaw做浏览器自动化? 去年我接手了一个每周都要重复的数据分析任务:登录内部系统导出销售数据,清洗后生成可视化报告。这种机械劳动不仅耗时࿰…...
SGP30传感器数据不准?可能是你的I2C时序和初始化搞错了(避坑指南)
SGP30传感器数据异常排查指南:从硬件设计到软件调试的完整解决方案 1. 硬件设计中的常见陷阱与优化方案 SGP30作为一款高精度环境传感器,其硬件设计细节直接影响数据可靠性。许多开发者遇到的首要问题往往源于电路设计阶段被忽视的关键参数。 电源稳定性…...
从CLPM到RI-CLPM:Mplus中交叉滞后模型的进阶指南与选择策略
从CLPM到RI-CLPM:纵向数据分析的模型选择与实战解析 在心理学和行为科学的纵向研究中,交叉滞后模型(CLPM)长期以来是分析变量间相互影响关系的标准工具。然而,随着研究方法论的进步,研究者们逐渐认识到传统…...
数据恢复全面指南:开源数据救援工具组合实战手册
数据恢复全面指南:开源数据救援工具组合实战手册 【免费下载链接】testdisk TestDisk & PhotoRec 项目地址: https://gitcode.com/gh_mirrors/te/testdisk 数据丢失的噩梦与解决方案 2023年,摄影师小李在一次外景拍摄后误格式化了SD卡&#…...
基于springboot的旅游景点门票信息系统设计与实现-vue
目录 技术栈选择系统模块划分数据库设计接口设计规范前端实现要点安全措施部署方案开发流程测试计划扩展功能预留 项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作 技术栈选择 后端采用Spring Boot框架,提供RESTful…...
用极空间 NAS 搭专属博客:Typecho 部署全攻略,把创作握在自己手里
前言 作为常年折腾各类私有部署工具的科技爱好者,我一直觉得「真正的创作自由」,藏在自己能掌控的服务器里。试过不少博客程序,要么配置繁琐,要么资源占用高,直到把 Typecho 和极空间 NAS 结合,才找到最舒…...
