笔记十七、认识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;

文件目录结构

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

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

相关文章

【Mybatis系列】Mybatis之TypeHandler入门

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

MX6ULL学习笔记 (一)交叉工具链的安装

前言&#xff1a; ARM 裸机、Uboot 移植、Linux 移植这些都需要在 Ubuntu 下进行编译&#xff0c;编译就需要编译 器&#xff0c;Ubuntu 自带的 gcc 编译器是针对 X86 架构的&#xff01;而我们现在要编译的是 ARM 架构的代码&#xff0c;因为我们编译的代码是需要烧写到ARM板子…

jpg转ico

使用pillow就行 from PIL import Imagedef jpg_to_ico(jpg_path, ico_path, size256):# 打开JPG图片img Image.open(jpg_path)# 将图片转换为ICO格式img.save(ico_path, "ico", sizes[(size, size)])if __name__ "__main__":# 设置JPG图片路径和ICO图标…

Oracle整体架构

4. Oracle整体架构 所谓整体架构,这里是指保证Oracle数据库系统正常工作和运行所必须的组件及其实现。从大的方面讲,这主要包括实例和数据库。在此基础上细分,实例由相关内存区域和服务进程组成,数据库包括各种相关文件,而这些相关内存区域、服务进程及相关文件又可再进一…

区块链存证:杭州互联网法院备选方案之一

文章目录 背景上报的存证系统设计备选方案***总体原则******分层架构******基础节点******存证链******存证业务******存证接入******通用功能******跨链对接架构***业务流程描述用户发起原创内容存证&#xff08;对应上图中左边1,2,3活动&#xff09;发现侵权行为&#xff0c;…

互联网金融智能风险防控技术要求

《互联网金融智能风险防控技术要求》 8月6日&#xff0c;国家市场监督管理总局和国家标准化管理委员会发布《互联网金融智能风险防控技术要求》&#xff08;GB/T 42929-2023&#xff09;&#xff08;以下简称“《要求》”&#xff09;&#xff0c;将于2023年12月1日实施。 《要…

HashMap遍历方式

HashMap是一个键值对的集合&#xff0c;我们不能通过简单的循环来遍历HashMap&#xff0c;所以我们一般通过以下两种方式来遍历HashMap,一种是通过KeySet集合来遍历&#xff0c;另一种是通过entry键值对对象来遍历。 KeySet遍历HashMap 通过keySet()方法 获取HashMap的keySet …

文章采集器-免费的文章采集工具大全

在当今信息爆炸的时代&#xff0c;获取有效的信息变得尤为关键。随之而来的问题是&#xff0c;如何高效地从海量信息中筛选出我们所需的内容呢&#xff1f;文章采集器应运而生&#xff0c;它就像是信息世界中的一把神奇的筛子&#xff0c;能够帮助我们从大海一般的信息中捞取我…

配置和运行yolov5时报错ModuleNotFoundError: No module named ‘ultralytics.yolo‘的解决方法

yolov5的官方文件 链接&#xff1a;https://pan.baidu.com/s/1WNoTDvBGDrgTfUiHDSB6Gg?pwd8MXz 提取码&#xff1a;8MXz 在终端里面运行detect.py文件&#xff0c;报下面的错误 分析上面的错误&#xff0c;发现是在utils/general.py文件里的39行处报错了。因为找不到check_r…

ruby3.2.2 报错 undefined symbol: EC_GROUP_new_curve_GF2m

一、执行ruby -ropenssl -e puts OpenSSL::OPENSSL_VERSION 查看openssl版本时报错 ruby -ropenssl -e puts OpenSSL::OPENSSL_VERSION 这是因为ruby内的openssl版本是3.2.0版本的 而自openssl3.0以后已经废弃 EC_GROUP_new_curve_GF2m了 二、解决方案 指定ruby内的openssl…

NX二次开发UF_CURVE_create_arc 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_create_arc Defined in: uf_curve.h int UF_CURVE_create_arc(UF_CURVE_arc_p_t arc_coords, tag_t * arc ) overview 概述 Creates an arc. You input the matrix tag, …

前端学习系列之html

目录 初识html 发展史 优势 W3C 标准 地址 格式 网页基本标签 标题标签 段落标签 换行标签 水平线标签 字体样式 注释和特殊符号 特殊符号 图像、超链接 图像 常见图像格式 格式 超链接 格式 重要属性 href&#xff1a;规定链接指向的页面的 URL target…

C#,《小白学程序》第二十七课:大数四则运算之“运算符重载”的算法及源程序

1 文本格式 using System; using System.Text; using System.Collections; using System.Collections.Generic; /// <summary> /// 大数的四则&#xff08;加减乘除&#xff09;运算 /// 及其运算符重载&#xff08;取余数&#xff09; /// </summary> public cl…

动态规划学习——斐波那契数列

目录 最长的斐波那契数列子序列的长度 1.题目 2.题目接口 3.解题思路及其代码 最长的斐波那契数列子序列的长度 1.题目 如果序列x_1&#xff0c;X_2&#xff0c;...&#xff0c;x_n 满足下列条件&#xff0c;就说它是斐波那契式的: 1.n > 3 2.对于所有i2 <n&a…

市场风险计量方法

目录 &#xff08;1&#xff09;缺口分析 &#xff08;2&#xff09;久期分析 &#xff08;3&#xff09;外汇敞口 &#xff08;4&#xff09;敏感性分析 &#xff08;5&#xff09;风险价值&#xff08;VaR&#xff09; &#xff08;1&#xff09;缺口分析 衡量利率变动…

Windows安装、配置、启动、卸载Redis

1.下载windows版本Redis&#xff0c;如Redis-x64-5.0.14.zip 2.解压到任意目录&#xff0c;如F:\qc-development\Redis5.0.14 3.&#xff08;非必要&#xff09;修改redis配置文件redis.windows.conf&#xff0c;如修改端口号为6380 # Accept connections on the specified …

error “you should set MAGICKCORE_HDRI_ENABLE

最近做一个项目需要配置ImageMagick库&#xff0c;本项目配置环境如下&#xff1a; ImageMagick version 7 Operating system, version and so on ubuntu 20.04 Description error "you should set MAGICKCORE_HDRI_ENABLE 查阅网上的资料&#xff1a; 默认的是DMAGICKC…

【华为OD题库-041】人气最高的店铺-java

题目 某购物城有m个商铺&#xff0c;现决定举办一场活动选出人气最高店铺。活动共有n位市民参与&#xff0c;每位市民只能投一票&#xff0c;但1号店铺如果给该市民发放q元的购物补贴&#xff0c;该市民会改为投1号店铺。请计算1号店铺需要最少发放多少元购物补贴才能成为人气最…

蓝桥杯双向排序

这里写自定义目录标题 题目分析代码思路 题目分析 n,m都是 1 0 5 10^5 105 &#xff0c;需要将时间复杂度控制在 n log ⁡ n n \log n nlogn以内。 如果有两次连续的前缀操作&#xff0c;由于它们都是降序排列&#xff0c;等价于只做第二次排列&#xff0c;忽略掉第一次。 同…

【MediaTek T830】MediaTek T830介绍

MediaTek T830介绍 千兆级吞吐量 MediaTek T830 平台是一个高集成度的系统单芯片&#xff08;SoC&#xff09;&#xff0c;整合了 4G 和 5G 调制解调器、FR1 射频收发器、GNSS 接收机和电源管理系统。高度集成式设计让 T830 拥有更小的尺寸和更低的功耗。设备制造商可使用…