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

笔记二十一、使用路由search进行传递参数

21.1 父组件设置路由参数

<NavLink to={`classify?param_A=${this.state.name}&param_B=${this.state.age}`}
className={this.activeStyle}>classify</NavLink>

import React from "react";
import {NavLink, Outlet} from "react-router-dom";class App extends React.Component {// 类组件中不能用const定义变量// 选中高亮activeStyle = ({isActive}) => {return isActive ? 'background' : "";};state = {name: 'elendaLee', age: 20};render() {return (<div>首页的页面<div style={{display: "flex", justifyContent: 'center', marginTop: '20px'}}><NavLink to={`classify?param_A=${this.state.name}&param_B=${this.state.age}`}className={this.activeStyle}>classify</NavLink><NavLink to='navigation' className={this.activeStyle}>navigation</NavLink></div><div style={{background: 'red'}}>{/*<!-- Renders the child route's element, if there is one. -->*/}<Outlet/></div></div>);}
}export default App;

 20.2 子组件接收路由参数

import React from 'react';
import {useSearchParams} from "react-router-dom";const Classify = () => {// 第一个参数是接收路由参数,第二个是改变路由参数的方法,可以修改路由参数const [search, setSearch] = useSearchParams();const param_1 = search.get("param_A");const param_2 = search.get("param_B");return (<div>分类的页面<div>父组件home传递的参数1:{param_1}父组件home传递的参数2:{param_2}</div><button onClick={() => setSearch('param_A=Leo&param_B=25')}>点击更改</button></div>);
}export default Classify;

路由表不用参数设置

使用路由search进行传递参数 实用情况比较小

相关文章:

笔记二十一、使用路由search进行传递参数

21.1 父组件设置路由参数 <NavLink to{classify?param_A${this.state.name}&param_B${this.state.age}} className{this.activeStyle}>classify</NavLink> import React from "react"; import {NavLink, Outlet} from "react-router-dom"…...

python多线程和多进程

1.多线程 线程是程序执行的最小单位&#xff0c;一个进程至少有一个线程。 提高并发性。通过线程可方便有效地实现并发性。进程可创建多个线程来执行同一程序的不同部分。 进程之间不能共享内存&#xff0c;但线程之间共享内存非常容易。 Python 常用的多线程库有threading 和…...

VMware虚拟机网络配置详解

vmware为我们提供了三种网络工作模式&#xff0c;它们分别是&#xff1a;Bridged&#xff08;桥接模式&#xff09;、NAT&#xff08;网络地址转换模式&#xff09;、Host-Only&#xff08;仅主机模式&#xff09; 打开vmware虚拟机&#xff0c;我们可以在选项栏的“编辑”下的…...

VUE语法--img图片不显示/img的src动态赋值图片显示

1、问题概述 常见情景1&#xff1a;在VUE中使用img显示图片的时候&#xff0c;通过传参的方式传入图片的路径和名称&#xff0c;VUE不加载本地资源而是通过http://localhost:8080/...的地址去加载网络资源&#xff0c;从而出现了图片无法显示的情况。 常见情景2&#xff1a;针…...

springboot+vue智能企业设备管理系统05k50

智能设备管理系统主要是为了提高工作人员的工作效率和更方便快捷的满足用户&#xff0c;更好存储所有数据信息及快速方便的检索功能&#xff0c;对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性&#xff0c;遵循开发的系统优化的原则&#xf…...

C++中的new、operator new与placement new

new operator new operator是我们常用的new。 new 和 delete 是用来在 堆上申请和释放空间的 &#xff0c;是 C 定义的 关键字&#xff0c;和 sizeof 一样。 实际 new / delete 和 malloc / free 最大的区别是&#xff0c;前者对于 自定义类型 除了可以开辟空间&#xff0c;…...

ElasticSearch之cat anomaly detectors API

curl -X GET "https://localhost:9200/_cat/ml/anomaly_detectors?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; curl -X GET "https://localhost:9200/_cat/ml/ano…...

Luminar Neo1.16.0(ai智能图像处理)

Luminar Neo是一款ai智能图像编辑软件&#xff0c;它专注于使用人工智能技术来实现对照片的快速、高效和创造性的编辑。 具体来说&#xff0c;Luminar Neo可以自动移除景观或旅行照片中令人分心的元素&#xff0c;例如电话线、电线杆等&#xff0c;从而增强照片的整体质量。同…...

ElasticSearch之cat aliases API

执行aliases命令&#xff0c;如下&#xff1a; curl -X GET "https://localhost:9200/_cat/aliases?pretty&vtrue" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; alias index …...

bash编程 数组和for循环的应用

bash编程 数组和for循环的应用 1、问题背景2、bash 定义数组3、for循环遍历输出数组所有元素4、编写bash脚本输出每个端口是否在监听状态 1、问题背景 linux服务器开机后&#xff0c;需要检查一组端口是否在监听&#xff0c;以便判断这些端口对应的服务是否在运行。可以考虑使…...

Python基础:标准库概览

1. 标准库介绍 Python 标准库非常庞大&#xff0c;所提供的组件涉及范围十分广泛&#xff0c;正如以下内容目录所显示的。这个库包含了多个内置模块 (以 C 编写)&#xff0c;Python 程序员必须依靠它们来实现系统级功能&#xff0c;例如文件 I/O&#xff0c;此外还有大量以 Pyt…...

C#,《小白学程序》第三课:类class,类的数组及类数组的排序

类class把数值与功能巧妙的进行了结合&#xff0c;是编程技术的主要进步。 下面的程序你可以确立 分数 与 姓名 之间关系&#xff0c;并排序。 1 文本格式 /// <summary> /// 同学信息类 /// </summary> public class Classmate { /// <summary> /…...

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

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

二 使用GPIO的复用功能 利用USART 实现printf()

参考这篇&#xff1a; STM32串口通信详解 1. 关于USART USART ( universal synchronous / asynchronous receiver /transmitter) 是一种串行通讯协议 , 允许设备通过串行端口进行数据传输&#xff0c; USART 能够以同步或者异步的方式进行工作&#xff0c;在实际的运用中&…...

C#中的警告CS0120、CS0176、CS0183、CS0618、CS0649、CS8600、CS8601、CS8602、CS8604、CS8625及处理

目录 一、CS0120 二、CS0176 1.解决前 2.解决后 3.解决办法 三、CS0183 四、CS0618 五、CS8600 六、CS8602 七、CS8622 1. 解决前&#xff1a; 2. 解决后&#xff1a; 3.解决方法&#xff1a; 八、CS8604和CS8625 九、CS0649 十、CS8601 一、CS0120 严重性 代…...

js中声明变量的关键字(const,let,var)

const 特点&#xff1a; const不允许在同一作用域重复声明&#xff0c;块级作用域暂时性死区&#xff0c;在声明之前&#xff0c;该变量是不可用的const声明的是一个只读变量&#xff0c;声明之后不能改变其值&#xff0c;一旦声明必须初始化但是const定义的对象属性是可以修…...

Android13 launcher循环切页

launcher 常规切页&#xff1a;https://blog.csdn.net/a396604593/article/details/125305234 循环切页 我们知道&#xff0c;launcher切页是在packages\apps\Launcher3\src\com\android\launcher3\PagedView.java的onTouchEvent中实现的。 1、滑动限制 public boolean onT…...

Java学习路线第一篇:Java基础(2)

这篇则分享Java学习路线第一part&#xff1a;Java基础&#xff08;2&#xff09; 从看到这篇内容开始&#xff0c;你就是被选定的天命骚年&#xff0c;将承担起学完Java基础的使命&#xff0c;本使命为单向契约&#xff0c;你可选择YES或者选择YES。 具体路线安排&#xff1a…...

网络工程师精华篇,50种网络故障及解决方法大集合

上午好&#xff0c;我的网工朋友。 做网络工程师&#xff0c;自然离不开网络&#xff0c;而日常工作中能搞多少大项目&#xff1f;最常见的其实还是网络故障的处理了。 怎么最高效地排查网络故障&#xff1f;怎么简单几招通网&#xff1f; 今天就从基础的入手&#xff0c;分…...

Unity播放网络视频

using System.Collections; using System.Collections.Generic; using UnityEngine; using Mx.UI; using Mx.Utils; using UnityEngine.UI; using UnityEngine.Video; /// <summary> 视频UI面板 </summary> public class VideoUIForm : BaseUIForm { private …...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...