当前位置: 首页 > 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 …...

AI智能体视觉检测系统(TVA)工作原理系列(十二)

——实战部署&#xff1a;TVA在柔性产线中的落地与ROI分析 作为技术人员&#xff0c;最终要面对的是项目的落地与交付。TVA系统在柔性产线&#xff08;多品种、小批量&#xff09;中的部署具有独特的优势。以一个汽车座椅调节器工厂为例&#xff0c;该工厂需要混线生产数十种型…...

MusePublic Art Studio效果实测:1024x1024输出在主流NVIDIA显卡表现

MusePublic Art Studio效果实测&#xff1a;1024x1024输出在主流NVIDIA显卡表现 1. 引言&#xff1a;当极简美学遇上高清渲染 想象一下&#xff0c;你有一个绝妙的创意画面在脑海中盘旋&#xff0c;但你不是程序员&#xff0c;也不想面对复杂的代码和命令行。你需要的&#x…...

避开开关电源的坑:AP值计算中3个易错点实测复盘

避开开关电源的坑&#xff1a;AP值计算中3个易错点实测复盘 在开关电源设计中&#xff0c;AP值&#xff08;Area Product&#xff09;作为磁芯选择的核心参数&#xff0c;直接关系到变压器的功率处理能力和整体效率。然而&#xff0c;即使经验丰富的工程师&#xff0c;在实际项…...

别再只测电压了!用STM32G474的ADC玩点花的:过采样提升精度与多通道扫描实战

突破ADC性能极限&#xff1a;STM32G474过采样与多通道扫描实战指南 对于嵌入式开发者而言&#xff0c;ADC&#xff08;模数转换器&#xff09;就像系统的"感官神经"&#xff0c;但大多数项目仅停留在基础电压测量层面。STM32G474系列搭载的ADC模块隐藏着令人惊艳的高…...

MiniCPM-V-2_6部署不求人:Ollama三步走,小白也能轻松玩转

MiniCPM-V-2_6部署不求人&#xff1a;Ollama三步走&#xff0c;小白也能轻松玩转 1. 为什么选择MiniCPM-V-2_6&#xff1f; MiniCPM-V-2_6是目前视觉多模态领域的一颗新星&#xff0c;它虽然体积小巧&#xff08;仅8B参数&#xff09;&#xff0c;但性能却能与GPT-4V、Gemini…...

2026 年 Intel 酷睿 Ultra 平台装机:华硕主板全系列专业主板测评与精准选购指南

进入 2026 年,Intel 酷睿 Ultra 200S Plus新品的到来,完成消费级市场的全面落地,新一代硬件架构为游戏、内容创作、AI 应用带来了全新的性能体验。在整机搭建过程中,主板怎么选成为多数用户的核心疑问,华硕主板作为 Intel 平台的核心合作产品,覆盖了从旗舰到入门的全价位段需求…...

【VimRAG 】技术解析:阿里通义实验室多模态记忆图 RAG 框架深度剖析

文章目录VimRAG 技术解析&#xff1a;阿里通义实验室多模态记忆图 RAG 框架深度剖析一、引言二、问题根源&#xff1a;传统 RAG 在多模态场景下的三重困境三、核心架构&#xff1a;三大技术组件3.1 多模态记忆图&#xff08;MMG&#xff09;3.2 图调制视觉记忆编码&#xff08;…...

前端 GraphQL:别再为 API 调用头疼了

前端 GraphQL&#xff1a;别再为 API 调用头疼了 什么是前端 GraphQL&#xff1f; GraphQL 是一种用于 API 的查询语言&#xff0c;也是一个满足你数据查询的运行时。别以为 GraphQL 只是一种新的 API 格式&#xff0c;它是前端数据获取的革命性解决方案。 为什么需要前端 Grap…...

终极Jellyfin Media Player Qt WebEngine优化指南:10个提升播放性能的实用技巧

终极Jellyfin Media Player Qt WebEngine优化指南&#xff1a;10个提升播放性能的实用技巧 【免费下载链接】jellyfin-desktop-qt Jellyfin Desktop Client 项目地址: https://gitcode.com/GitHub_Trending/je/jellyfin-desktop-qt Jellyfin Desktop Client是一款功能强…...

Rocket.Chat终极安全指南:区块链技术如何重塑企业通信安全

Rocket.Chat终极安全指南&#xff1a;区块链技术如何重塑企业通信安全 【免费下载链接】Rocket.Chat The Secure CommsOS™ for mission-critical operations 项目地址: https://gitcode.com/GitHub_Trending/ro/Rocket.Chat Rocket.Chat是一款开源、安全且完全可定制的…...