笔记二十一、使用路由search进行传递参数
21.1 父组件设置路由参数
<NavLink to={`classify?param_A=${this.state.name}¶m_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}¶m_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¶m_B=25')}>点击更改</button></div>);
}export default Classify;
路由表不用参数设置
使用路由search进行传递参数 实用情况比较小
相关文章:
笔记二十一、使用路由search进行传递参数
21.1 父组件设置路由参数 <NavLink to{classify?param_A${this.state.name}¶m_B${this.state.age}} className{this.activeStyle}>classify</NavLink> import React from "react"; import {NavLink, Outlet} from "react-router-dom"…...
python多线程和多进程
1.多线程 线程是程序执行的最小单位,一个进程至少有一个线程。 提高并发性。通过线程可方便有效地实现并发性。进程可创建多个线程来执行同一程序的不同部分。 进程之间不能共享内存,但线程之间共享内存非常容易。 Python 常用的多线程库有threading 和…...
VMware虚拟机网络配置详解
vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式)、NAT(网络地址转换模式)、Host-Only(仅主机模式) 打开vmware虚拟机,我们可以在选项栏的“编辑”下的…...
VUE语法--img图片不显示/img的src动态赋值图片显示
1、问题概述 常见情景1:在VUE中使用img显示图片的时候,通过传参的方式传入图片的路径和名称,VUE不加载本地资源而是通过http://localhost:8080/...的地址去加载网络资源,从而出现了图片无法显示的情况。 常见情景2:针…...
springboot+vue智能企业设备管理系统05k50
智能设备管理系统主要是为了提高工作人员的工作效率和更方便快捷的满足用户,更好存储所有数据信息及快速方便的检索功能,对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性,遵循开发的系统优化的原则…...
C++中的new、operator new与placement new
new operator new operator是我们常用的new。 new 和 delete 是用来在 堆上申请和释放空间的 ,是 C 定义的 关键字,和 sizeof 一样。 实际 new / delete 和 malloc / free 最大的区别是,前者对于 自定义类型 除了可以开辟空间,…...
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"执行结果输出如下: curl -X GET "https://localhost:9200/_cat/ml/ano…...
Luminar Neo1.16.0(ai智能图像处理)
Luminar Neo是一款ai智能图像编辑软件,它专注于使用人工智能技术来实现对照片的快速、高效和创造性的编辑。 具体来说,Luminar Neo可以自动移除景观或旅行照片中令人分心的元素,例如电话线、电线杆等,从而增强照片的整体质量。同…...
ElasticSearch之cat aliases API
执行aliases命令,如下: curl -X GET "https://localhost:9200/_cat/aliases?pretty&vtrue" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下: alias index …...
bash编程 数组和for循环的应用
bash编程 数组和for循环的应用 1、问题背景2、bash 定义数组3、for循环遍历输出数组所有元素4、编写bash脚本输出每个端口是否在监听状态 1、问题背景 linux服务器开机后,需要检查一组端口是否在监听,以便判断这些端口对应的服务是否在运行。可以考虑使…...
Python基础:标准库概览
1. 标准库介绍 Python 标准库非常庞大,所提供的组件涉及范围十分广泛,正如以下内容目录所显示的。这个库包含了多个内置模块 (以 C 编写),Python 程序员必须依靠它们来实现系统级功能,例如文件 I/O,此外还有大量以 Pyt…...
C#,《小白学程序》第三课:类class,类的数组及类数组的排序
类class把数值与功能巧妙的进行了结合,是编程技术的主要进步。 下面的程序你可以确立 分数 与 姓名 之间关系,并排序。 1 文本格式 /// <summary> /// 同学信息类 /// </summary> public class Classmate { /// <summary> /…...
建筑结构健康监测系统和传统人工监测的区别
在繁华的城市里,建筑结构作为城市生命线的重要一环,其安全与稳定对城市的运转和居民的生活至关重要。为了更好地守护建筑结构的健康,WITBEE万宾自主研发建筑结构健康监测系统让建筑安全,在上一个台阶。 WITBEE万宾建筑结构健康监测…...
二 使用GPIO的复用功能 利用USART 实现printf()
参考这篇: STM32串口通信详解 1. 关于USART USART ( universal synchronous / asynchronous receiver /transmitter) 是一种串行通讯协议 , 允许设备通过串行端口进行数据传输, USART 能够以同步或者异步的方式进行工作,在实际的运用中&…...
C#中的警告CS0120、CS0176、CS0183、CS0618、CS0649、CS8600、CS8601、CS8602、CS8604、CS8625及处理
目录 一、CS0120 二、CS0176 1.解决前 2.解决后 3.解决办法 三、CS0183 四、CS0618 五、CS8600 六、CS8602 七、CS8622 1. 解决前: 2. 解决后: 3.解决方法: 八、CS8604和CS8625 九、CS0649 十、CS8601 一、CS0120 严重性 代…...
js中声明变量的关键字(const,let,var)
const 特点: const不允许在同一作用域重复声明,块级作用域暂时性死区,在声明之前,该变量是不可用的const声明的是一个只读变量,声明之后不能改变其值,一旦声明必须初始化但是const定义的对象属性是可以修…...
Android13 launcher循环切页
launcher 常规切页:https://blog.csdn.net/a396604593/article/details/125305234 循环切页 我们知道,launcher切页是在packages\apps\Launcher3\src\com\android\launcher3\PagedView.java的onTouchEvent中实现的。 1、滑动限制 public boolean onT…...
Java学习路线第一篇:Java基础(2)
这篇则分享Java学习路线第一part:Java基础(2) 从看到这篇内容开始,你就是被选定的天命骚年,将承担起学完Java基础的使命,本使命为单向契约,你可选择YES或者选择YES。 具体路线安排:…...
网络工程师精华篇,50种网络故障及解决方法大集合
上午好,我的网工朋友。 做网络工程师,自然离不开网络,而日常工作中能搞多少大项目?最常见的其实还是网络故障的处理了。 怎么最高效地排查网络故障?怎么简单几招通网? 今天就从基础的入手,分…...
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 …...
亲测有效!Z-Image-Turbo解决AI绘画三大痛点:慢、黑、崩
亲测有效!Z-Image-Turbo解决AI绘画三大痛点:慢、黑、崩 1. 痛点终结者:当AI绘画遇上Turbo引擎 作为一名长期被AI绘画"折磨"的设计师,我经历过太多崩溃时刻:等待生成的进度条仿佛永远走不完,好不…...
为什么你的Agent总在POC后消失?SITS2026成熟度模型首次定义“生产就绪阈值”——含6项硬性技术指标
第一章:SITS2026发布:AIAgent架构成熟度模型 2026奇点智能技术大会(https://ml-summit.org) 模型定位与核心价值 SITS2026正式发布的AIAgent架构成熟度模型(AAMM)是首个面向生产级AI Agent系统设计的分层评估框架,聚…...
2026会话存档是什么?新版会话存档有什么功能?
一.概述会话内容存档产品——乐聊会话助手plus是由贵州遐宇科技服务有限公司与企业微信合作产品。此产品是基于企业微信会话存档API接口进行二次开发的监管系统,2024年1月登记为软件作品正式发行。该系统提供企业会话内容存档管理、超时回复提醒、员工客户互动过程合…...
【Git】TortiseGit设置过滤上传文件
一、Git忽略文件机制概述 Git通过.gitignore文件管理版本控制中的忽略规则,决定哪些文件不应被跟踪和提交。TortoiseGit作为Windows平台常用的Git图形化客户端,提供了便捷的界面操作来配置这些规则。合理设置文件过滤对于保持仓库整洁、避免提交敏感信息…...
DeEAR部署案例:高校实验室利用DeEAR开展语音情感计算课程实验教学
DeEAR部署案例:高校实验室利用DeEAR开展语音情感计算课程实验教学 1. 引言:当语音遇见情感,教学有了新工具 想象一下,你正在上一门关于人机交互的课程。老师讲了很多理论知识,比如什么是语音情感识别,它在…...
人脸分析系统功能详解:Face Analysis WebUI使用技巧
人脸分析系统功能详解:Face Analysis WebUI使用技巧 1. 系统概述与核心价值 Face Analysis WebUI 是一款基于 InsightFace 模型的人脸分析工具,它将复杂的人脸识别技术封装成简单易用的网页界面。无需编写代码,用户只需上传图片,…...
我在 Cursor 里接入了 Claude Code,三种方式实测告诉你哪个最好用
我在 Cursor 里接入了 Claude Code,三种方式实测告诉你哪个最好用 Cursor 用了快一年,日常写代码够用。但遇到跨文件重构、从零搭架构这类活,它的 Agent 模式经常半途而废——改了三个文件,漏掉第四个的类型定义,然后整…...
AI股票分析师场景应用:快速搭建本地化金融分析工具全流程
AI股票分析师场景应用:快速搭建本地化金融分析工具全流程 1. 引言:金融分析的智能化转型 在金融投资领域,及时获取专业分析报告是做出投资决策的关键。传统方式需要依赖券商研究报告或付费咨询,不仅成本高昂,还存在隐…...
终极指南:如何快速构建现代化XMPP网页聊天客户端
终极指南:如何快速构建现代化XMPP网页聊天客户端 Converse.js是一个功能强大、现代化的开源XMPP/Jabber网页聊天客户端,完全在浏览器端运行。这个100%客户端解决方案支持多种部署方式,可以独立使用或无缝集成到现有网站中。🚀 为…...
别再死磕NeRF了!从体素到点云,聊聊2024年三维重建的5种主流技术选型与实战避坑
别再死磕NeRF了!从体素到点云,聊聊2024年三维重建的5种主流技术选型与实战避坑 当你在深夜盯着屏幕,反复调整NeRF的视角采样参数却依然无法解决场景边缘模糊问题时;当项目Deadline临近,而体素模型的内存占用已经让显卡…...
