react 路由v6

这里是区别:V5 vs V6
这里是官网:可以查看更多高级属性

基本使用:

1、配置文件

src/routes/index


import React from "react";const Home = React.lazy(() => import("../Pages/Home"));
const About = React.lazy(() => import("../Pages/About"));const routes = [{path: "/home",name: "home",element: <Home></Home>,},{path: "/about",name: "about",element: <About></About>,},
];export default routes
2. 使用路由方式1

src / App.js
useRoutes可以代替标签完成:

  • 注册路由,完成路由和组件的匹配
  • 自动根据当前路径匹配一个组件
  • 给当前路由组件指定展示位置,就是elements所处的位置
import { useRoutes } from "react-router";
import routes from "./routes";function App() {const elements = useRoutes(routes);return (<div className="App"><h3>{导航区...} </h3>{elements}</div>);
}export default App;

src / main.js
注意:

<BrowserRouter>必须存在,包裹最外层奥

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<BrowserRouter><App /></BrowserRouter>
);
3、使用路由表的方式2

在这里插入图片描述

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

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

相关文章

LeetCode—<位运算专项>剑指 Offer 15、56 - I、56 - II、65

剑指 Offer 15. 二进制中1的个数、56 - I. 数组中数字出现的次数、56 - II. 数组中数字出现的次数 II、65. 不用加减乘除做加法 题目描述&#xff1a; [15] 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表…

Asp.net2.0 学习资源(转载)

asp.net 2.0 http://beta.asp.net/QUICKSTART/aspnet/http://msdn.microsoft.com/vstudio/express/vwd/learning/default.aspxasp.net 1.0 名称&#xff1a;快速入门地址&#xff1a;http://chs.gotdotnet.com/quickstart/描述&#xff1a;本站点是微软.NET技术的快速入门网站&…

java学习笔记十一——对象转型

向上转型&#xff1a;子类对象当做父类对象来使用&#xff0c;因为子类对象拥有父类对象的所有成员&#xff0c;所以不会发生任何错误。向下转型&#xff1a;父类对象当做子类对象来使用&#xff0c;因为子类对象部分特性父类并没有&#xff0c;所以需要加强制转换符。向上转型…

LeetCode—<数学专项>剑指 Offer 14 - I、39、57 - II、62、66

剑指 Offer 14- I. 剪绳子、39. 数组中出现次数超过一半的数字、57 - II. 和为s的连续正数序列、62. 圆圈中最后剩下的数字、66. 构建乘积数组 题目描述&#xff1a; [14 - I] 给你一根长度为 n 的绳子&#xff0c;请把绳子剪成整数长度的 m 段&#xff08;m、n都是整数&#…

Win8下在Vmware11中安装使用苹果系统OS X 10.10

原文:Win8下在Vmware11中安装使用苹果系统OS X 10.10近来因为需要做 iOS 的项目&#xff0c;所以需要多花一些时间看看敲敲代码。因为自己手头上并没有 Mac&#xff08;过年为了闲的时候能玩玩游戏买了联想&#xff0c;唉&#xff09;&#xff0c;想想不能只靠每天在公司的时间…

图片滑动效果(转)

var $ function(id) {return "string" typeof id ? document.getElementById(id) : id; };function Event(e) {var oEvent document.all ? window.event : e;if (document.all) {if (oEvent.type "mouseout") {oEvent.relatedTarget oEvent.toEleme…

《Windows Communication Foundation之旅》系列之二

《Windows Communication Foundation之旅》系列之二 三、WCF的技术要素作为基于SOA&#xff08;Service Oriented Architecture&#xff09;的一个框架产品&#xff0c;WCF最重要的就是能够快捷的创建一个服务&#xff08;Service&#xff09;。如下图所示&#xff0c;一个WCF…

JS---捕捉URL地址,以及模仿GET方法

主页博客相册个人档案好友查看文章JS 模拟的GET方法代码: function _GET(){var url window.top.location.href;var start url.indexOf(?)1;var end url.length;var Query_String url.substring(start, end);var Get Query_String.split(&);for (var i in Get){;var t…

centos 记录用户行为轨迹

遇到问题&#xff1a;公司增加了运维管理员&#xff0c;为确保服务器安全&#xff0c;和发生问题的时候好确认问题&#xff0c;需要记录每位服务器登陆者的行为轨迹。解决问题&#xff1a;linux script 命令正有如此强大的功能。满足我们需求。script记录终端会话。操作步骤&am…

引子

回看博客&#xff0c;最后一篇转载都是2012年6月份了。将近三年的中断&#xff0c;是虚度的明证。 回顾这段时间&#xff1a;结婚&#xff0c;老婆怀孕&#xff0c;离开北京&#xff0c;儿子出生。。普通人的幸福生活的一部分&#xff0c;几乎是我这段时间的全部了。 这段时间的…

LeetCode—<数学专项>剑指 Offer 20、29、31、67

剑指 Offer 20. 表示数值的字符串、29. 顺时针打印矩阵、31. 栈的压入、弹出序列、67. 把字符串转换成整数 题目描述&#xff1a; [20] 请实现一个函数用来判断字符串是否表示数值&#xff08;包括整数和小数&#xff09;。 数值&#xff08;按顺序&#xff09;可以分成以下几…

Android内核剖析

--Android内核剖析 柯元旦 编著ISBN 978-7-121-14398-4 2011年9月出版定价&#xff1a;79.90元16开616页内容简介&#xff1a;本书内容分别从基础、内核、系统、编译以及硬件驱动几个方面对Android内核相关知识进行深入剖析&#xff0c;详细分析了Android内核的内部机制&#…

QQ,MSN,SKYPE等在线状态代码

QQ在线咨询代码,MSN在线代码,雅虎通在线代码,贸易通在线代码 即时通讯如雅虎通,腾讯QQ,微软MSN,AOL ICQ,goolge TALK,阿里巴巴 贸易通,淘宝旺旺等大大方便了我们的沟通和工作,在web2.0的时代,在你的网站网页上添加雅虎通,腾讯QQ,微软MSN,AOL ICQ,goolge TALK,阿里巴巴 贸易通,淘…

Bitmap的秘密

为什么80%的码农都做不了架构师&#xff1f;>>> 之前已经参加过几次QCon峰会&#xff0c;不过今年QCon 2014 上海峰会对我来说比较特别&#xff0c;不再只是一名听众&#xff0c;而是第一次登台演讲。感觉的确不太一样&#xff0c;一来是身份从听众变成了讲师&…

POJ 2018 Best Cow Fences (二分答案构造新权值 or 斜率优化)

$ POJ~2018~Best~Cow~ Fences $&#xff08;二分答案构造新权值&#xff09; $ solution: $ 题目大意&#xff1a; 给定正整数数列 $ A $ &#xff0c;求一个平均数最大的长度不小于 $ L $ 的子段 这道题首先我们如果没有长度限制&#xff0c;直接扫一遍数组即可而有了长度限制…

LeetCode—剑指 Offer 59 - I、59 - II

剑指 Offer 59 - I. 滑动窗口的最大值、59 - II. 队列的最大值 题目描述&#xff1a; [59 - I] 给定一个数组 nums 和滑动窗口的大小 k&#xff0c;请找出所有滑动窗口里的最大值。 [59 - II] 请定义一个队列并实现函数 max_value 得到队列里的最大值&#xff0c;要求函数max_…

在WinForm中实现省市级联的效果

在WinForm通过连接数据库来实现省市级联的效果首先&#xff0c;在数据库中创建两个表,省份表(Province)和城市表(City),两个表之间需建立外键约束&#xff0c;主键是省份Id&#xff0c; 外键是城市表中的省份Id&#xff0c;从而建立起省份和城市之间的从属关系。示例代码&#…

.net常用的方法

//用javascript判断是否去那个页面Response.Write("<script language\"javascript\" type\"text/javascript\">");Response.Write("if(confirm(是否去那个页面。)){ document.URLLookContent.aspx}");Response.Write("<…

hdu 2531 Catch him

Catch him Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 124 Accepted Submission(s): 49 Problem Description在美式足球中&#xff0c;四分卫负责指挥整只球队的进攻战术和跑位&#xff0c;以及给接球员传球…

AE 模板 天使之城

http://p2p.uying.com/html/20061206/20491895751.stmhttp://www.yxdmt.net/bbs/dispbbs.asp?boardid17&ID1716 转载于:https://www.cnblogs.com/jackcovey/archive/2007/02/05/640858.html