[react基础]关于v6版本route的变化,以及常见应用模式

该说不说,在做这些之前,你要记得一件事

route不是react或者vue等原本就有的组件!需要你手动下载!然后导入!

原本的框架只是最终挂载到一个html界面上!!!

别再问我为啥你扒下来的代码为啥不好使了!     讨厌 > _< 

 下载指令去看我另一篇推文

今天复盘了一下自己的实训项目以及课程设计,两个东西混用了不同版本的route导致产生了很多混淆内容,今天在这边辨析一下,顺便说明v6版本中我们倾向于怎么做

1.Router -> BrowersRouter

首先就算Router被细化成了多个不同的东西,使用区别如下

<Router>v5版本以前
</Router><BrowersRouter>v6版本以后
</BrowersRouter>

一共被分成了:

BrowerRouter:适用于常见的web应用

HashRouter:适用于静态页面(url不太一样)

MemoryRouter:适用于服务器环境(一些根本用不到url的情况是这样的)

而原本的Router不能再使用了

2.Switch -> Routes

其实除了改了名字以后其他没啥变化,只是承担具体路由的工具

(名字更加直白可懂了)

3.Route

对于每个基本路由来说,其实这个几乎没有改动,只要注意几点

1.path属性不是常见的对象或者jsx语法,只是一个字符串就行了

2.现在子组件内容有两种方法获取

element:这个属性允许你直接使用jsx语法去写dom标签

component:这个属性需要你直接输入一个组件对象,这个可以外部引入

至于link....我觉得属实是画蛇添足了

4.跳转的变化

其实有的时候我们偶然获取到一些项目,你会发现用v5里面仍然存在一些路由跳转的标签or属性,但是实际上有一些是作者自行封装的.

v5版本支持的仍然是原生js的路由跳转,即使用history对象,但是获取这个对象的方法和原生不一样

const history = useHistory();//接下来再对history对象进行一些其他的操作

这个东西的用法和原生是一模一样的,虽然只是你手动获取命名的对象

但是再v6版本时候,这个路由跳转对象变了,使用方法也取消掉了原本history具有的功能,只剩跳转了

const navigate = useNavigate();// 使用 navigate 函数进行路由跳转
navigate('/about');

现在这是获取一个路由跳转对象,或者说是函数,然后输入数值完成跳转

5.在react中的子路由偏好

刚开始学react的时候,我把子路由写成这样

报错了嘛?没有

能跑嘛?不能

咋回事?不知道

其实这就是典型的vue后遗症,总是想把路由全都托管到一起,组合在一个文件里面

但是react的子路由模式更倾向于,将子路由放在父组件内部自行管理,只是最后根据url决定显示哪些罢了.

在React Router中,通常更倾向于将子路由的定义分离到各自的组件中,以保持组件的独立性和可重用性。这意味着每个组件负责自己的子路由,而不需要将所有路由配置都放在一个地方。这种方法更加模块化,有助于更好地组织代码和维护路由结构。

在Vue中,通常会使用嵌套路由将父子关系直观地表达在一个地方,这对于某些场景可能更方便,但也可能导致路由配置相对集中在一个文件中。

选择使用哪种方式取决于你的项目需求和个人偏好。React Router的方式更加分散,适用于需要更灵活路由组织和组件独立性的场景。而Vue Router的方式更集中,适用于需要直观表示嵌套关系的场景。无论你选择哪种方式,都可以根据具体情况来决定如何组织你的路由结构。

举个例子

import { BrowserRouter as Router, Link, Route } from 'react-router-dom';//父组件
function ParentComponent() {return (<div><Route path="/parent/child1" component={ChildComponent1} /><Route path="/parent/child2" component={ChildComponent2} /></div>);
}//子组件
function ChildComponent1() {return <h2>子组件1内容</h2>;
}//子组件
function ChildComponent2() {return <h2>子组件2内容</h2>;
}//根组件
function App() {return (<Router>{/* 路由规则和组件的对应关系 */}<Route path="/parent" component={ParentComponent} /></Router>);
}

另外这里要注意一个问题,子组件中要包含父组件的路由作为前缀!

 所以我们经常可以见到工程中,会在根组件上加上一些基础路由

 差不多这样子,后面有别的需求我再补充就是了

6.工程中的常见用法举例:(侧边栏路由导航)

(1)首先先单独封装一个路由对象的数组

 

(2)在你的侧边栏中使用map语句遍历,创建条目

(3)为每个条目添加跳转的点击事件即可

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

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

相关文章

详解浏览器HTTP强、协商缓存

私有缓存 私有缓存是绑定到特定客户端的缓存 —通常是浏览器缓存。由于存储的响应不与其他客户端共享&#xff0c;因此私有缓存可以存储该用户的个性化响应 Cache-Control: private 个性化内容通常是由 cookie 控制&#xff0c;但是 cookie 的存在并不能表明他是私有的&#x…

2023年数学建模国赛A 定日镜场的优化设计思路分析

构建以新能源为主体的新型电力系统&#xff0c;是我国实现“碳达峰”“碳中和”目标的一项重要措施。塔式太阳能光热发电是一种低碳环保的新型清洁能源技术[1]。定日镜是塔式太阳能光热发电站&#xff08;以下简称塔式电站&#xff09;收集太阳能的基本组件&#xff0c;其底座由…

论数据库的种类

摘要 数据库是现代信息管理和数据存储的重要工具&#xff0c;几乎在各个领域都有广泛应用。不同类型的数据库适用于不同的应用场景和需求。本文将介绍几种常见的数据库种类&#xff0c;并探讨它们的特点和适用范围。 正文 一、关系型数据库&#xff08;RDBMS&#xff09; 关…

IntelliJ IDEA中那些让你相见恨晚超好用插件

InteIIiJ IDEA 2023.2版本发布了,在2023.2中&#xff0c;官方根据用户的宝贵反馈对新UI做出了大量改进&#xff0c;新UI界面大大减少了干扰&#xff0c;可以让用户更好地专注于代码。相信很多同学都已经迫不及待地尝试了。 安装激活好 Intellij idea 之后&#xff0c;再搭配如下…

小米手机便签怎么导出到华为mate60Pro手机上?

华为mate60Pro手机于2023年8月29日发布了先锋计划&#xff0c;有不少网友都抢到了这款新机。而有一些网友表示自己在换手机之前遇到了问题&#xff0c;这就是之前使用的手机是小米&#xff0c;所以需要把重要的图片、短信、通讯录、便签等数据导出到新的手机上&#xff0c;但是…

使用ChatGLMTokenizer处理json格式数据

我下载了一些中文wikipedia数据&#xff0c;准备采用ChatGLMTokenizer对齐进行清洗&#xff0c;整理为预训练语料。 import numpy as np import json from tqdm import tqdm from chatglm_tokenizer.tokenization_chatglm import ChatGLMTokenizertokenizer ChatGLMTokenizer…

微信小程序父组件向子组件传参,子组件样式无效问题处理

微信小程序父组件向子组件传参,子组件样式无效问题处理 父组件代码 引入 json "usingComponents": {"evaluate":"../evaluate/evaluate"},wxml <evaluate id1111></evaluate>子组件代码 json {"usingComponents": {&…

yolov7添加注意力机制

yolov7结构图 方法&#xff1a;直接在common里改&#xff0c;在相关的后面加上就行 1、接受通道数的注意力机制 1、目的&#xff1a;在三个输出地方添加注意力 yolov7.yaml文件&#xff0c;换成其他模块 注意力链接 2、models下建SE.py 3、common.py下&#xff0c;先找c…

网络连接评分机制之NetworkFactory

在开机时,各个提供网络连接的对象需要向ConnectivityService注册自己,并把自己所提供的网络的分值告诉ConnectivityService。 为了ConnectivityService便于统一管理,每一个具备提供网络服务的对象都需要创建一个NetworkFactory的子类对象,并利用该对象注册自己,以及提供自…

Spring Cloud服务发现与注册的原理与实现

Spring Cloud服务发现与注册的原理与实现 一、简介1 服务发现的定义2 服务发现的意义 二、Spring Cloud服务注册与发现的实现1 Spring Cloud服务注册1.1 服务注册的基本框架1.2 服务注册的实现方式 2 Spring Cloud服务发现2.1 服务发现的基本框架2.2 服务发现的实现方式 三、Sp…

JDK8的lambda方式List多字段排序List.stream().sorted()

JDK8的lambda方式List多字段排序List.stream().sorted() 多字段排序 List<HumanDetailDownloadVO> collect dataList.stream().sorted(// 日期 倒序 Comparator.comparing(HumanDetailDownloadVO::getDate_str, Comparator.reverseOrder())// 仓id 倒序 .thenCompari…

【Java项目实战】牛客网论坛项目1 - Spring入门与初识SpringMVC

目录 Spring 入门SpringInitializrApplicationContextAwareControllerDAODAO 名称索引ServiceConfig自动装配 初识 SpringMVCHttp 请求GETPOSTHTML 渲染响应 JSON 数据 Spring 入门 SpringInitializr IDEA 专业版自带的功能&#xff0c;也可以直接搜索对应网站&#xff0c;通…

数据库概念

定义&#xff1a; 数据库&#xff08;Database 简称DB&#xff09;是持久存储有组织/可共享数据/的容器 数据库管理系统(MySQL、Oracle、DB2)是操作/和管理数据库/的软件 分类&#xff1a; 关系(型)数据库 (MySQL、Oracle、SQL Server、SQLite、DB2) 非关系(型)数据库 (Redis…

华为云 存在不支持迁移的外键解决方法

DRS 检测出源端存在不支持的外键引用操作 MySQL、GaussDB(for MySQL)为源的全量增量或增量迁移、同步场景&#xff0c;以及MySQL、GaussDB(for MySQL)为源灾备场景 表1 源端存在不支持的外键引用操作 预检查项 源端存在不支持的外键引用操作。 描述 同步对象中存在包含CASC…

git如何查看和修改用户名和邮箱

一、查看Git全局配置的用户名和邮箱 在Git中可以通过以下命令查看你的全局配置&#xff1a; git config --global user.namegit config --global user.email其中&#xff0c;git config是Git配置命令&#xff0c;--global是全局配置选项&#xff0c;user.name和user.email是我…

Unity物体查找方式

参考资料 cUnity中使用GameObject.Find、Transform.Find查找GameObject_思月行云的博客-CSDN博客 GameObject.Find 通过名字或路径查找游戏对象。 GameObject.Find("GameObject"); GameObject.Find("GameObject/ChildGameObject); 使用规范: 1.无法查找隐藏…

配置Jedis连接池

一、概述 Jedis本身是线程不安全的&#xff0c;并且频繁的创建和销毁连接会有性能损耗&#xff0c;因此推荐使用Jedis连接池代替Jedis的直连方式。 二、创建连接池 public class JedisConnectionFactory {private static final JedisPool jedisPool;static {//配置连接池Jedi…

Centos 7 通过Docker部署OnlyOffice

前言&#xff1a; 在本文中&#xff0c;我们将详细介绍如何使用 Docker 部署功能强大的协作办公套件 OnlyOffice。通过 Docker&#xff0c;您可以轻松构建、部署和管理 OnlyOffice&#xff0c;从而提高团队协作和企业办公的效率。 一、安装Docker 1、向系统添加Docker CE软件仓…

windows下运行springboot的jar包,修改替换class文件,修改配置文件application,打包

在windows下跑springboot的jar包&#xff0c;经常会用到一些命令行和操作。 1、修改配置文件&#xff08;以application.yml为例&#xff09; #提取文件 jar xvf mqtt-10.1.0.jar BOOT-INF/classes/application.yml#将文件装回jar包 jar uvf mqtt-10.1.0.jar BOOT-INF/classe…

Qt简易闹钟

配置文件 QT core gui texttospeechgreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c11# The following define makes your compiler emit warnings if you use # any Qt feature that has been marked deprecated (the exact warnings # depend on your compi…