当前位置: 首页 > news >正文

第三十一章 React中路由组件和一般组件

React中,组件是应用程序的构建块。它们是可重用的,可以用于创建复杂的UIReact中有两种类型的组件:路由组件和一般组件

一般组件

一般组件是React应用程序的基本构建块。它们是可重用的,可以用于创建复杂的UI。它们不知道URL,也没有任何路由逻辑。它们只是根据传递给它们的propsstate来呈现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。它们通常用于创建导航菜单、链接和其他依赖于当前URLUI元素。

以下就是路由组件:

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不同

一般组件:写组件标签时传递了什么,就能收到什么

路由组件:主要接收固定的三个属性(historylocationmatch

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:这个组件用于定义应用程序中的路由。它有两个属性:pathcomponentpath 属性用于定义路由的 URL 路径,component 属性用于指定匹配路由时应该渲染的组件。

  • Switch:这个组件用于包装一组 Route 组件,并确保只有一个 Route 组件被渲染。当您有多个路由匹配相同的 URL 路径时,这非常有用。

  • Link:这个组件用于在应用程序的不同路由之间创建链接。它有一个 to 属性,用于指定链接的 URL 路径。

  • NavLink: 一个特殊版本的 Link,当它与当前 URL 匹配时,为其渲染元素添加样式属性。


详情参考:

印记中文-React Router

React路由详解

相关文章:

第三十一章 React中路由组件和一般组件

在React中&#xff0c;组件是应用程序的构建块。它们是可重用的&#xff0c;可以用于创建复杂的UI。React中有两种类型的组件&#xff1a;路由组件和一般组件。 一般组件 一般组件是React应用程序的基本构建块。它们是可重用的&#xff0c;可以用于创建复杂的UI。它们不知道U…...

怎么把pdf中的某一页分出来?

怎么把pdf中的某一页分出来&#xff1f;PDF格式的文档在日常生活中是非常常见的&#xff0c;相信大家都对其有所了解&#xff0c;并且经常使用。它的主要特点是不允许用户随意编辑其中的内容&#xff0c;当我们仅需要阅读时&#xff0c;PDF文档无疑是十分方便的&#xff0c;尤其…...

MongoDB 聚合操作Map-Reduce

这此之前已经对MongoDB中的一些聚合操作进行了详细的介绍&#xff0c;主要介绍了聚合方法和聚合管道&#xff1b;如果您想对聚合方法和聚合管道进行了解&#xff0c;可以参考&#xff1a; MongoDB 数据库操作汇总https://blog.csdn.net/m1729339749/article/details/130086022…...

shiro CVE-2016-4437 漏洞复现

shiro Apache Shiro是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理。使用Shiro的易于理解的API,您可以快速、轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序漏洞原理 在Apache shiro的框架中&#xff0c;执行身份验证时提供了…...

Seqkit-2.2.0 移植指南(openEuler 20.03 LTS SP3)

1.软件介绍 seqkit是一种跨平台的、极快的&#xff0c;全面的fasta/q处理工具。seqkit为所有的主流操作系统提供了一种可执行的双元文件&#xff0c;包括Windows&#xff0c;Linux&#xff0c;MacOS X&#xff0c;并且不依赖于任何的配置或预先配置就可以直接使用。 关于seqk…...

Java版本企业电子招投标采购系统源码——功能模块功能描述+数字化采购管理 采购招投标

功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为外部供…...

二十三种设计模式第五篇--原型模式

原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 这种模式是实现了一个原型接口&#xff0c;该接口用于创建当前对象的克隆。当直接创建…...

阿里云镜像区别公共镜像、自定义、共享、云市场和社区镜像介绍

阿里云服务器镜像根据来源不同分为公共镜像、自定义镜像、共享镜像、云市场镜像和社区镜像&#xff0c;一般没有特殊情况选择公共镜像&#xff0c;公共镜像是阿里云官网提供的正版授权操作系统&#xff0c;云市场镜像是在纯净版操作系统的基础上预装了相关软件及运行环境&#…...

非线性方程二分法

非线性方程二分法 优点&#xff1a;算法直观、简单、总能保证收敛&#xff1b;局限&#xff1a;收敛速度慢、一般不单独用它求根&#xff0c;仅为了获取根的粗略近似 文章目录 非线性方程二分法[toc]1 二分法基本思想2 二分法实现 1 二分法基本思想 设 f ( x ) f(x) f(x)在 [ …...

H3C防火墙单机旁路部署(网关在防火墙)

防火墙旁路部署在核心交换机上&#xff0c;内网有三个网段vlan 10&#xff1a;172.16.10.1/24、vlan 20&#xff1a;172.16.20.1/24、vlan30&#xff1a;172.16.30.1。要求内网网关在防火墙设备上&#xff0c;由防火墙作为DHCP服务器给终端下发地址&#xff0c;同时由防火墙来控…...

基于密度的无线传感器网络聚类算法的博弈分析(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 提高能源效率是无线传感器网络面临的关键挑战之一&#xff0c;无线传感器网络日益普遍。由于节点&#xff08;传感器&#xff…...

宕机了?!DolphinScheduler 高可用和 Failover 机制关键时刻保命

高可用性是 Apache DolphinScheduler 的特性之一。它通过冗余来避免单点问题&#xff0c;所有组件天然支持横向扩容&#xff1b;但仅仅保证了冗余还不够&#xff0c;当系统中有节点宕机时&#xff0c;还需要有故障转移机制能够自动将宕机节点正在处理的工作转移到新节点上执行&…...

try(){}用法try-with-resources、try-catch-finally

属于Java7的新特性。 经常会用try-catch来捕获有可能抛出异常的代码。如果其中还涉及到资源的使用的话&#xff0c;最后在finally块中显示的释放掉有可能被占用的资源。 但是如果资源类已经实现了AutoCloseable这个接口的话&#xff0c;可以在try()括号中可以写操作资源的语句(…...

常见Http错误码学习

​ 常见 http 错误码 服务器巡检时比较常见的 http 错误码 400 Bad Request408 Request Timeout499 client has closed connection502 Bad Gateway504 Gateway Timeout 这些错误码反映了服务器什么样的状态&#xff0c;仅看字面意思还不太容易理解&#xff0c;就动手做个试验…...

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、数据字典&#xff1a;实现对数据字典标签的增删改查操作 2、编码管理&#xff1a;实现对系统编码的增删改查操作 3、用户管理&#xff1a;管理和查看用户角色 4、菜单管理&#xff1a;实现对系统菜单的增删改查操…...

Eureka与Zookeeper的区别

著名的CAP 理论指出&#xff0c;一个分布式系统不可能同时满足 C( 一致性 ) 、 A( 可用性 ) 和 P( 分区容错性 ) 。 由于分区容错性在是分布式系统中必须要保证的&#xff0c;因此我们只能在 A 和 C 之间进行权衡&#xff0c;在此 Zookeeper 保证的是 CP, 而 Eureka 则是 AP…...

顺序表和链表的各种代码实现

一、线性表 在日常生活中&#xff0c;线性表的例子比比皆是。例如&#xff0c;26个英文字母的字母表&#xff08;A,B,C,……&#xff0c;Z&#xff09;是一个线性表&#xff0c;表中的数据元素式单个字母。在稍复杂的线性表中&#xff0c;一个数据元素可以包含若干个数据项。例…...

C# 介绍三种不同组件创建PDF文档的方式

1 c# 数据保存为PDF&#xff08;一&#xff09; &#xff08;spire pdf篇&#xff09; 2 c# 数据保存为PDF&#xff08;二&#xff09; &#xff08;Aspose pdf篇&#xff09; 3 c# 数据保存为PDF&#xff08;三&#xff09; &#xff08;PdfSharp篇&#xff09; 组件名称 绘制…...

极简面试题 --- Redis

什么是 Redis&#xff1f; Redis 是一个基于内存的键值存储系统&#xff0c;也被称为数据结构服务器。它支持多种数据结构&#xff0c;例如字符串、哈希表、列表、集合和有序集合&#xff0c;并且可以在内存中快速读写。 Redis 的优势有哪些&#xff1f; 快速&#xff1a;由…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...