第三十一章 React中路由组件和一般组件
在React中,组件是应用程序的构建块。它们是可重用的,可以用于创建复杂的UI。React中有两种类型的组件:路由组件和一般组件。
一般组件
一般组件是React应用程序的基本构建块。它们是可重用的,可以用于创建复杂的UI。它们不知道URL,也没有任何路由逻辑。它们只是根据传递给它们的props和state来呈现UI。
类似于下面的Header组件:
import React, { Component } from 'react'export default class Header extends Component {render() {console.log('这是Header组件的Props',this.props)return (<div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div>)}
}
他们在可以接收父组件传递给他们的自定义的标签属性props。
路由组件
路由组件是知道URL并具有路由逻辑的组件。它们负责根据当前URL呈现适当的UI。它们通常用于创建导航菜单、链接和其他依赖于当前URL的UI元素。
以下就是路由组件:
import { Link, Route } from 'react-router-dom'
//-------------------------------------------<Link className="list-group-item" to="/home">Home</Link><Link className="list-group-item" to="/about">About</Link>
//-------------------------------------------
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
在此示例中,使用了react-router-dom库中的Link组件来创建指向应用程序中不同页面的链接。当单击链接时,路由组件将根据当前URL呈现适当的UI。
路由组件与一般组件的区别
- 1、写法不同
一般组件:<Demo/>
路由组件:<Route path="/demo" component={Demo}/>
- 2、存放位置不同
一般组件:一般放在**components目录**下面
路由组件:一般放在**pages目录**下面
- 3、接收到的Props不同
一般组件:写组件标签时传递了什么,就能收到什么
路由组件:主要接收固定的三个属性(history、location、match)
history:go: ƒ go(n)goBack: ƒ goBack()goForward: ƒ goForward()push: ƒ push(path, state)replace: ƒ replace(path, state)location:pathname: “/about”search: “”state: undefinedmatch:params: {}path: “/about”url: “/about”
常用的路由组件有哪些
-
BrowserRouter:这个组件用于包装整个应用程序,并为应用程序提供路由功能。 -
Route:这个组件用于定义应用程序中的路由。它有两个属性:path和component。path属性用于定义路由的URL路径,component属性用于指定匹配路由时应该渲染的组件。 -
Switch:这个组件用于包装一组Route组件,并确保只有一个Route组件被渲染。当您有多个路由匹配相同的URL路径时,这非常有用。 -
Link:这个组件用于在应用程序的不同路由之间创建链接。它有一个to属性,用于指定链接的URL路径。 -
NavLink: 一个特殊版本的Link,当它与当前URL匹配时,为其渲染元素添加样式属性。
详情参考:
印记中文-React Router
React路由详解
相关文章:
第三十一章 React中路由组件和一般组件
在React中,组件是应用程序的构建块。它们是可重用的,可以用于创建复杂的UI。React中有两种类型的组件:路由组件和一般组件。 一般组件 一般组件是React应用程序的基本构建块。它们是可重用的,可以用于创建复杂的UI。它们不知道U…...
怎么把pdf中的某一页分出来?
怎么把pdf中的某一页分出来?PDF格式的文档在日常生活中是非常常见的,相信大家都对其有所了解,并且经常使用。它的主要特点是不允许用户随意编辑其中的内容,当我们仅需要阅读时,PDF文档无疑是十分方便的,尤其…...
MongoDB 聚合操作Map-Reduce
这此之前已经对MongoDB中的一些聚合操作进行了详细的介绍,主要介绍了聚合方法和聚合管道;如果您想对聚合方法和聚合管道进行了解,可以参考: MongoDB 数据库操作汇总https://blog.csdn.net/m1729339749/article/details/130086022…...
shiro CVE-2016-4437 漏洞复现
shiro Apache Shiro是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理。使用Shiro的易于理解的API,您可以快速、轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序漏洞原理 在Apache shiro的框架中,执行身份验证时提供了…...
Seqkit-2.2.0 移植指南(openEuler 20.03 LTS SP3)
1.软件介绍 seqkit是一种跨平台的、极快的,全面的fasta/q处理工具。seqkit为所有的主流操作系统提供了一种可执行的双元文件,包括Windows,Linux,MacOS X,并且不依赖于任何的配置或预先配置就可以直接使用。 关于seqk…...
Java版本企业电子招投标采购系统源码——功能模块功能描述+数字化采购管理 采购招投标
功能模块: 待办消息,招标公告,中标公告,信息发布 描述: 全过程数字化采购管理,打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力,为外部供…...
二十三种设计模式第五篇--原型模式
原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 这种模式是实现了一个原型接口,该接口用于创建当前对象的克隆。当直接创建…...
阿里云镜像区别公共镜像、自定义、共享、云市场和社区镜像介绍
阿里云服务器镜像根据来源不同分为公共镜像、自定义镜像、共享镜像、云市场镜像和社区镜像,一般没有特殊情况选择公共镜像,公共镜像是阿里云官网提供的正版授权操作系统,云市场镜像是在纯净版操作系统的基础上预装了相关软件及运行环境&#…...
非线性方程二分法
非线性方程二分法 优点:算法直观、简单、总能保证收敛;局限:收敛速度慢、一般不单独用它求根,仅为了获取根的粗略近似 文章目录 非线性方程二分法[toc]1 二分法基本思想2 二分法实现 1 二分法基本思想 设 f ( x ) f(x) f(x)在 [ …...
H3C防火墙单机旁路部署(网关在防火墙)
防火墙旁路部署在核心交换机上,内网有三个网段vlan 10:172.16.10.1/24、vlan 20:172.16.20.1/24、vlan30:172.16.30.1。要求内网网关在防火墙设备上,由防火墙作为DHCP服务器给终端下发地址,同时由防火墙来控…...
基于密度的无线传感器网络聚类算法的博弈分析(Matlab代码实现)
目录 💥1 概述 📚2 运行结果 🎉3 参考文献 👨💻4 Matlab代码 💥1 概述 提高能源效率是无线传感器网络面临的关键挑战之一,无线传感器网络日益普遍。由于节点(传感器ÿ…...
宕机了?!DolphinScheduler 高可用和 Failover 机制关键时刻保命
高可用性是 Apache DolphinScheduler 的特性之一。它通过冗余来避免单点问题,所有组件天然支持横向扩容;但仅仅保证了冗余还不够,当系统中有节点宕机时,还需要有故障转移机制能够自动将宕机节点正在处理的工作转移到新节点上执行&…...
try(){}用法try-with-resources、try-catch-finally
属于Java7的新特性。 经常会用try-catch来捕获有可能抛出异常的代码。如果其中还涉及到资源的使用的话,最后在finally块中显示的释放掉有可能被占用的资源。 但是如果资源类已经实现了AutoCloseable这个接口的话,可以在try()括号中可以写操作资源的语句(…...
常见Http错误码学习
常见 http 错误码 服务器巡检时比较常见的 http 错误码 400 Bad Request408 Request Timeout499 client has closed connection502 Bad Gateway504 Gateway Timeout 这些错误码反映了服务器什么样的状态,仅看字面意思还不太容易理解,就动手做个试验…...
qemu-基础篇——ARM 链接过程分析(六)
文章目录 ARM 链接过程分析源文件global_bss_file.cglobal_data_fle.cglobal_function_file.cglobal_rodata_file.cmain.c 链接文件 link.lds编译命令及反汇编命令解析 .o 文件global_bss_file.oglobal_data_fle.oglobal_function_file.oglobal_rodata_file.omain.o 链接观察链…...
Java企业工程项目管理系统+spring cloud 系统管理+java 系统设置+二次开发
工程项目各模块及其功能点清单 一、系统管理 1、数据字典:实现对数据字典标签的增删改查操作 2、编码管理:实现对系统编码的增删改查操作 3、用户管理:管理和查看用户角色 4、菜单管理:实现对系统菜单的增删改查操…...
Eureka与Zookeeper的区别
著名的CAP 理论指出,一个分布式系统不可能同时满足 C( 一致性 ) 、 A( 可用性 ) 和 P( 分区容错性 ) 。 由于分区容错性在是分布式系统中必须要保证的,因此我们只能在 A 和 C 之间进行权衡,在此 Zookeeper 保证的是 CP, 而 Eureka 则是 AP…...
顺序表和链表的各种代码实现
一、线性表 在日常生活中,线性表的例子比比皆是。例如,26个英文字母的字母表(A,B,C,……,Z)是一个线性表,表中的数据元素式单个字母。在稍复杂的线性表中,一个数据元素可以包含若干个数据项。例…...
C# 介绍三种不同组件创建PDF文档的方式
1 c# 数据保存为PDF(一) (spire pdf篇) 2 c# 数据保存为PDF(二) (Aspose pdf篇) 3 c# 数据保存为PDF(三) (PdfSharp篇) 组件名称 绘制…...
极简面试题 --- Redis
什么是 Redis? Redis 是一个基于内存的键值存储系统,也被称为数据结构服务器。它支持多种数据结构,例如字符串、哈希表、列表、集合和有序集合,并且可以在内存中快速读写。 Redis 的优势有哪些? 快速:由…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合
作者:来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布,Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明,Elastic 作为 …...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗? 在ComfyUI中实现图生视频并延长到5秒,需要结合多个扩展和技巧。以下是完整解决方案: 核心工作流配置(24fps下5秒120帧) #mermaid-svg-yP…...
大数据治理的常见方式
大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法,以下是几种常见的治理方式: 1. 数据质量管理 核心方法: 数据校验:建立数据校验规则(格式、范围、一致性等)数据清洗&…...
