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

笔记十七、认识React的路由插件react-router-dom和基本使用

react-router 分类
web使用
react-router-dom
native使用
react-router-native
anywhere(使用麻烦)
react-router

安装

yarn add react-router-dom

 main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { BrowserRouter } from "react-router-dom";ReactDOM.createRoot(document.getElementById("root")).render(<React.StrictMode><BrowserRouter><App text={"react"} /></BrowserRouter></React.StrictMode>
);

App.jsx

import React from "react";
import About from "./components/About";
import Home from "./components/Home";
import { Link, Route, Routes } from "react-router-dom";
import "./app.css";class App extends React.Component {render() {return (<div className="all"><div><div className="link"><Link to="/home">打开首页的页面</Link></div><div className="link"><Link to="/about">打开关于的页面</Link></div></div><div className="view"><Routes><Route path="/about" element={<About />} /><Route path="/home" element={<Home />} /></Routes></div></div>);}
}
export default App;

文件目录结构

相关文章:

笔记十七、认识React的路由插件react-router-dom和基本使用

react-router 分类 web使用 react-router-dom native使用 react-router-native anywhere&#xff08;使用麻烦&#xff09; react-router 安装 yarn add react-router-dom main.jsx import React from "react"; import ReactDOM from "react-dom/client"…...

CleanMyMac X4.14.5Crack最新Mac电脑清理优化最佳应用

CleanMyMac X 4.14.5是用于清理和优化Mac的最佳应用程序和强大工具。它看起来很棒而且很容易理解。该软件可以清理、保护、优化、稳定和维护您的 Mac 系统。您可以立即删除不必要的、不寻常的、无用的垃圾文件、损坏的文件垃圾&#xff0c;并释放大量内存空间。此外&#xff0c…...

Linux shell单双引号区别

shell单双引号区别&#xff1a; Shell脚本中很多时候都在用单引号或双引号来框住字符串&#xff0c;但是他们之间是存在区别的 避免踩坑记录… 单引号 单引号中的任何字符都没有特殊含义,即一些转义字符&#xff0c;$ 变量引用都会无效&#xff0c;它只把他们当作一个单纯的…...

ES 8.x开始(docker-compose安装、kibana使用、java操作)

学习文档地址 一、Docker安装 这里使用docker-compose来安装&#xff0c;方便后续迁移&#xff0c;Elasticserach和kibina一起安装。 1、创建安装目录 configdataplugins 2、配置文件 配置文件有两个&#xff0c;一个是ES的配置文件&#xff0c;一个docker-compose的配置文件 …...

有了倾斜摄影,如何搭建一座智慧城市?

随着无人机航测、倾斜摄影等全新一代测绘信息技术方法的发展&#xff0c;可以迅速搜集制作精细化的城市三维模型&#xff0c;搭建城市地理信息基础服务架构。 近期都在重点关注的“智慧城市”究竟是什么&#xff0c;有什么重大作用&#xff0c;同时又面临着什么难关&#xff0c…...

设计测试用例的具体方法总结

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️白马沉河共歃誓&#xff0c;怒涛没城亦不悔 ☁️基于需求进行测试用例的设计 基…...

计算机毕业设计|基于SpringBoot+MyBatis框架的仿天猫商城购物系统设计与实现

计算机毕业设计|基于SpringBootMyBatis框架的仿天猫商城购物系统设计与实现 迷你仿天猫商城是一个基于SSM框架的综合性B2C电商平台&#xff0c;需求设计主要参考天猫商城的购物流程&#xff1a;用户从注册开始&#xff0c;到完成登录&#xff0c;浏览商品&#xff0c;加入购物…...

JAXB的XmlValue注解

XmlValue注解用在Java属性、或者方法上。它可以使得映射到XML Schema中的Java类具有一个simpleContent 或者simpleType。 一个Java类中最多只能有一个属性被XmlValue注解。 如果被XmlValue注解的JavaBean属性是Java类中唯一映射到XML的成员&#xff0c;那么该Java类将会被映射…...

Git版本管理(05) git仓库迁移(保留原来记录分支体系)

说明&#xff1a;本文主要是一次git迁移仓库的实战记录。 1 迁移前的准备 仓库迁移前&#xff0c;需要将所有有必要的分支checkout到本地&#xff08;想要转移到新仓库的分支就都 checkout一遍&#xff09;&#xff0c;接下来将old仓库从远程仓库克隆到本地&#xff1a; $git…...

科技与教育:未来教育的新趋势

在21世纪&#xff0c;科技的快速发展正在深刻地改变教育行业。从在线学习平台到虚拟现实教室&#xff0c;科技为教育带来了革命性的变化。本文将探讨科技如何影响现代教育&#xff0c;并预测未来教育的发展趋势。 一、科技在教育中的应用 在线学习平台&#xff1a;通过平台如C…...

E云管家微信群聊机器人开发

请求URL&#xff1a; http://域名地址/modifyGroupRemark 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是String登录实例标识chatRo…...

CVE-2023-27524:Apache Superset未授权访问漏洞复现

文章目录 ​Apache Superset 未授权访问漏洞(CVE-2023-27524)复现0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.漏洞复现 0x06 修复建议 ​Apache Superset 未授权访问漏洞(CVE-2023-27524)复现 0x01 前言 免责声明&#xff1a;请勿利用文…...

机器学习——多元线性回归升维

机器学习升维 升维使用sklearn库实现特征升维实现天猫年度销量预测实现中国人寿保险预测 升维 定义&#xff1a;将原始的数据表示从低维空间映射到高维空间。在线性回归中&#xff0c;升维通常是通过引入额外的特征来实现的&#xff0c;目的是为了更好地捕捉数据的复杂性&#…...

[C/C++]用堆实现TopK算法

一:引入 思考一个问题: 怎么在100个数中找到前10个最大的数? way1: 相信大多数人想到的方法是先把100个数放到数组中从大到小排序,再打印前10个数 way2: 前一文中我们讲了堆结构,那么就可以把这100个数建为大堆,再依次pop10次 这种方法虽然再这个问题下可行,但是如果是再1亿…...

3D点云目标检测:VoxelNex解读(带源码/未完)

VoxelNext 通用vsVoxelNext一、3D稀疏卷积模块1.1、额外的两次下采样1.2、稀疏体素删减 二、高度压缩三、稀疏池化四、head五、waymo数据集训练六、训练自己的数据集bug修改 通用vsVoxelNext 一、3D稀疏卷积模块 1.1、额外的两次下采样 使用通用的3D sparse conv&#xff0c;…...

【Docker】从零开始:11.Harbor搭建企业镜像仓库

【Docker】从零开始&#xff1a;11.Harbor搭建企业镜像仓库 1. Harbor介绍2. 软硬件要求(1). 硬件要求(2). 软件要求 3.Harbor优势4.Harbor的误区5.Harbor的几种安装方式6.在线安装(1).安装composer(2).配置内核参数,开启路由转发(3).下载安装包并解压(4).创建并修改配置文件(5…...

使用conan包 - 工作流程

使用conan包 - 工作流程 主目录 conan Using packages1 Single configuration2 Multi configuration 本文是基于对conan官方文档Workflows的翻译而来&#xff0c; 更详细的信息可以去查阅conan官方文档。 This section shows how to setup your project and manage dependenci…...

【LeeCode】59.螺旋矩阵II

给定一个正整数 n&#xff0c;生成一个包含 1 到 n^2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的正方形矩阵。 示例: 输入: 3 输出: [ [ 1, 2, 3 ], [ 8, 9, 4 ], [ 7, 6, 5 ] ] 解&#xff1a; class Solution {public int[][] generateMatrix(int n) {int[][] ar…...

rsyslog学习

rsyslog是什么 RSYSLOG&#xff08;Remote System Logging&#xff09;是一个开源的日志处理工具&#xff0c;用于在 Linux 和 Unix 系统上收集、处理和转发日志。它是一个健壮且高性能的日志处理程序&#xff0c;可以替换 Syslogd 作为标准的系统日志程序。RSYSLOG 提供了许多…...

Navicat 技术指引 | GaussDB服务器对象的创建/设计(编辑)

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...