笔记十七、认识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板子…

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

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

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

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

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

在当今信息爆炸的时代&#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…

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…

蓝桥杯双向排序

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

建筑结构健康监测系统和传统人工监测的区别

在繁华的城市里&#xff0c;建筑结构作为城市生命线的重要一环&#xff0c;其安全与稳定对城市的运转和居民的生活至关重要。为了更好地守护建筑结构的健康&#xff0c;WITBEE万宾自主研发建筑结构健康监测系统让建筑安全&#xff0c;在上一个台阶。 WITBEE万宾建筑结构健康监测…

基于C#实现Dijkstra算法

或许在生活中&#xff0c;经常会碰到针对某一个问题&#xff0c;在众多的限制条件下&#xff0c;如何去寻找一个最优解&#xff1f;可能大家想到了很多诸如“线性规划”&#xff0c;“动态规划”这些经典策略&#xff0c;当然有的问题我们可以用贪心来寻求整体最优解&#xff0…

MySQL数据库:外键、唯一键、唯一索引

目录 说明 一、如果要使用外键&#xff0c;表的存储引擎选择哪个&#xff1f; 1.1 答 1.2 示范 1.2.1 主表 &#xff08;1&#xff09;MyISAM的表&#xff1a;masterTable2 &#xff08;2&#xff09;InnoDB的表&#xff1a;masterTable1 1.2.2 从表 &#xff08;1&am…

人力资源管理后台 === 首页+部署

目录 1.首页-echarts图表的应用 2.首页-echarts图表的按需导入 3.路由模式-将路由改成history模式 4. 打包分析-分析 5.CDN加速 6.项目打包-安装nginx 7.mac/windows环境下nginx部署启动项目 8.nginx解决history的404问题 9.nginx配置代理解决生产环境跨域问题 1.首页-…

【学习草稿】pid控制基础实现--往水桶注水

pid 1&#xff09;非常通俗易懂的PID控制&#xff08;1&#xff09;https://zhuanlan.zhihu.com/p/37515841 球场上运动至指定地点&#xff08;比例控制&#xff09;&#xff1a;有图【很直观的帮助理解】&有文字分析 2&#xff09;初识PID-搞懂PID概念 https://zhuanlan.…

Linux4.6、进程优先级

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 进程优先级是什么&#xff1f; 为什么会有进程优先级&#xff1f; 那么优先级是如何办到的&#xff1f; 最后一个问题&#xff1a;Linux为什么要限制优先级&#xff1f; 进程优先级是什么&#xff1f; 就是进程在访…

2021年06月 Scratch图形化(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共10题,每题3分,共30分) 第1题 执行下列程序,输出的结果为? A:12 B:24 C:8 D:30 答案:B 第2题 执行下列程序,角色说出的内容是? A:2 B:3 C:4 D:5 答案:A 第3题 执行下列程序,输出结果为?