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

React-router v7 第四章(路由传参)

news 来源：原创 2025/8/22 12:56:15

参数传递

React-router 一共有三种方式进行参数传递，参数传递指的是在路由跳转时，将参数传递给目标路由。

Query方式

Query的方式就是使用 ? 来传递参数，例如：

#多个参数用 & 连接
/user?name=小满zs&age=18

跳转方式：

<NavLink  to="/about?id=123">About</NavLink> //1. NavLink 跳转
<Link to="/about?id=123">About</Link> //2. Link 跳转
import { useNavigate } from 'react-router'
const navigate = useNavigate()
navigate('/about?id=123') //3. useNavigate 跳转

获取参数：

//1. 获取参数
import { useSearchParams } from 'react-router'
const [searchParams, setSearchParams] = useSearchParams()
console.log(searchParams.get('id')) //获取id参数//2. 获取参数
import { useLocation } from 'react-router'
const { search } = useLocation()
console.log(search) //获取search参数 ?id=123

Params方式

Params的方式就是使用 :[name] 来传递参数，例如：

/user/:id

跳转方式：

<NavLink to="/user/123">User</NavLink> //1. NavLink 跳转
<Link to="/user/123">User</Link> //2. Link 跳转
import { useNavigate } from 'react-router'
const navigate = useNavigate()
navigate('/user/123') //3. useNavigate 跳转

获取参数：

import { useParams } from 'react-router'
const { id } = useParams()
console.log(id) //获取id参数

State方式

state在URL中不显示，但是可以传递参数，例如：

/user

跳转方式：

<Link to="/user" state={{ name: '小满zs', age: 18 }}>User</Link> //1. Link 跳转
<NavLink to="/user" state={{ name: '小满zs', age: 18 }}>User</NavLink> //2. NavLink 跳转
import { useNavigate } from 'react-router'
const navigate = useNavigate()
navigate('/user', { state: { name: '小满zs', age: 18 } }) //3. useNavigate 跳转

获取参数：

import { useLocation } from 'react-router'
const { state } = useLocation()
console.log(state) //获取state参数
console.log(state.name) //获取name参数
console.log(state.age) //获取age参数

总结

React Router 提供了三种参数传递方式，各有特点：

1. Params 方式 (`/user/:id`)

适用于：传递必要的路径参数（如ID）
特点：符合 RESTful 规范，刷新不丢失
限制：只能传字符串，参数显示在URL中

2. Query 方式 (`/user?name=xiaoman`)

适用于：传递可选的查询参数
特点：灵活多变，支持多参数
限制：URL可能较长，参数公开可见

3. State 方式

适用于：传递复杂数据结构
特点：支持任意类型数据，参数不显示在URL
限制：刷新可能丢失，不利于分享

选择建议：必要参数用 Params，筛选条件用 Query，临时数据用 State。

React-router v7 第四章(路由传参)

参数传递 React-router 一共有三种方式进行参数传递，参数传递指的是在路由跳转时，将参数传递给目标路由。 Query方式 Query的方式就是使用 ? 来传递参数，例如： #多个参数用 & 连接 /user?name小满zs&age18跳转方式&…...

编程日记 2025/8/22 12:56:15

常用密码技术初探

记得前几年有一部电影叫做《解除好友2：暗网》，它讲述了主角捡到一台电脑，并用它与好友进行视频通讯，但一名黑客通过网络技术篡改了通讯内容，最终导致所有参与视频通话的人都遭遇不测。电影当然存在夸张成分&#xff…...

编程日记 2025/8/22 12:54:09

电脑知识 | TCP通俗易懂详解＜二＞tcp首部

目录一、👋🏻前言二、🖃TCP快递单填写（必填部分） 1.🌸TCP快递单样式 2.🏢填写名称 3.🔢TCP序号 4. ✔️TCP确认号编辑5.✅️确认号的确认号 6.📏首部长度 …...

编程日记 2025/8/20 5:43:20

09-RocketMQ 深度解析：从原理到实战，构建可靠消息驱动微服务

RocketMQ 深度解析：从原理到实战，构建可靠消息驱动微服务一、RocketMQ 核心定位与架构探秘 1.1 分布式消息领域的中流砥柱在分布式系统中，消息队列是实现异步通信、解耦服务、削峰填谷的关键组件。RocketMQ 作为阿里巴巴开源的分布式消息…...

编程日记 2025/8/17 19:55:31

MyBatis 如何使用

1. 环境准备添加依赖（Maven） 在 pom.xml 中添加 MyBatis 和数据库驱动依赖： <dependencies><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId&g…...

编程日记 2025/8/17 1:43:36

AI日报 - 2025年04月17日

🌟 今日概览(60秒速览) ▎🤖 AGI突破 | OpenAI新模型或证人类未解定理，研究达Level 4 OpenAI安全博客暗示模型将创造新科学，能连接概念提新实验。CEO预测AI将证明人类未解定理，研究员称已达AGI第四层级。 ▎&#x1f4…...

编程日记 2025/8/22 12:56:14

【Leetcode-Hot100】缺失的第一个正数

题目解答有一处需要注意，我使用注释部分进行交换值，报错：超出时间限制。有人知道是为什么吗？难道是先给nums[i]赋值后，从而改变了后一项的索引？ class Solution(object):def firstMissingPositive(sel…...

编程日记 2025/8/19 15:27:23

Servlet简单示例

Servlet简单示例文章说明 Servlet 虽然是一门旧技术了，但是它的基础性和广泛性仍然不可忽视；我在实践中发现不少同学经常会被它的一些特性给困惑住；时常出现404等错误，这里我写下这篇文章，介绍Servlet的不同版本的特…...

编程日记 2025/8/22 12:54:08

spring：注解@Component、@Controller、@Service、@Reponsitory

背景 spring框架的一个核心功能是IOC，就是将Bean初始化加载到容器中，Bean是如何加载到容器的，可以使用spring注解方式或者spring XML配置方式。 spring注解方式直接对项目中的类进行注解，减少了配置文件内容，更加便于…...

编程日记 2025/8/19 21:05:31

LLM做逻辑推理题 - 野鸭蛋的故事

题目: 四个旅游家（张虹、印玉、东晴、西雨）去不同的岛屿去旅行，每个人都在岛上发现了野鸡蛋（1个到3个）。4人的年龄各不相同，是由18岁到21岁。已知： ①东晴是18岁。 ②印玉去了A岛。 ③21岁的女…...

编程日记 2025/8/17 20:46:26

Linux的目录结构（介绍，具体目录结构）

目录介绍具体目录结构简洁的目录解释详细的目录解释介绍 Linux的文件系统是采用级层式的树状目录结构，在此结构的最上层是根目录“/”。Linux的世界中，一切皆文件（比如：Linux会把硬件映射成文件来管理） 具体目…...

编程日记 2025/8/22 8:01:12

C++Cherno 学习笔记day21 [86]-[90] 持续集成、静态分析、参数计算顺序、移动语义、stdmove与移动赋值操作符

b站Cherno的课[86]-[90] 一、C持续集成二、C静态分析三、C的参数计算顺序四、C移动语义五、stdmove与移动赋值操作符一、C持续集成 Jenkins 商业软件二、C静态分析静态分析器会检查你的代码，并尝试检测各种错误，这些错误可能是你无意中编写的&am…...

编程日记 2025/8/17 20:52:16

python学习 -- 综合案例1：设计一款基于python的飞机大战小游戏

本文目录 pygame模块介绍核心模块与功能开发流程本文案例 - 飞机大战开发流程1. 导入必要的库2. 定义常量3. 创建精灵类4. 主程序运行游戏总结 pygame模块介绍 Pygame 是基于 Python 的开源、跨平台游戏开发库，依托 SDL（Simple DirectMedia Layer&am…...

编程日记 2025/8/20 4:27:52

开启 Python 编程之旅：基础入门实战班全解析

重要的东西放前面开启 Python 编程之旅：基础入门实战班全解析开启Python编程之旅：基础入门实战班全解析在当下热门的编程语言中，Python凭借简洁易读的语法、强大的功能和丰富的库，在数据科学、人工智能、Web开发等诸多领域大…...

编程日记 2025/8/18 20:09:17

Linux笔记---动静态库(原理篇)

1. ELF文件格式动静态库文件的构成是什么样的呢？或者说二者的内容是什么？ 实际上，可执行文件，目标文件，静态库文件，动态库文件都是使用ELF文件格式进行组织的。 ELF（Executable and Linkable…...

编程日记 2025/8/17 18:23:51

SpringBoot整合Logback日志框架深度实践

一、依赖与默认集成机制 SpringBoot从2.x版本开始默认集成Logback日志框架，无需手动添加额外依赖。当项目引入spring-boot-starter-web时，该组件已包含spring-boot-starter-logging，其底层实现基于LogbackSLF4J组合。这种设计使得开发者只需…...

编程日记 2025/8/17 17:30:37

Spring Boot中接入DeepSeek的流式输出

第一步，添加依赖：  <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId> </dependency> 第二步，配置We…...

编程日记 2025/8/21 4:31:32

路由交换网络专题 | 第四章 | 生成树 | VRRP | 边缘端口

拓扑图 （1）SW1、SW2、SW3 三台交换机之间存在环路问题，需要通过生成树协议破环，请简述二层环路可能导致的问题。因为交换机在收到一个广播帧之后，会对非接收端口进行转发。每台交换机都转发的话，就行形成一…...

编程日记 2025/8/17 18:24:57

SFOS2：常用容器（布局）介绍

一、前言最近在进行sailfish os的开发，由于在此之前并没有从事过QT开发的工作，所以对这一套颇为生疏，以此记录一下。以下内容不一定完全准确，开发所使用的是Qt Quick 2.6与Sailfish.Silica 1.0两个库。二、布局 1.Qt Quick 2.…...

编程日记 2025/8/21 15:16:43

VS qt 联合开发环境下的多国语言翻译

添加Linguist 文件方法，如同添加类文件的方式，那样： 其他跟QT的一样的流程，另外在main函数里要注册一下， QTextCodec::setCodecForLocale(textCodec); QTranslator translator5; QString trans5 fi…...

编程日记 2025/8/17 18:27:35

基于 Python 的 ROS2 应用开发全解析

引言在机器人操作系统（ROS）不断发展的进程中，ROS2 作为新一代的机器人框架，带来了诸多显著的改进与新特性。Python 作为一种简洁、高效且具有强大数据处理能力的编程语言，在 ROS2 应用开发中占据着重要地位。本文将深…...

编程日记 2025/8/19 14:28:40

AI分析师

01 实操人工公司需要开发了一个XX系统，在文件夹中包含了XX.csv，其中每一行表示一个XX样本，最后一列为每个样本的标签，现需要设计模型与系统，请按照以下要求完成算法测试。根据要求完成以下任务，将完成的…...

编程日记 2025/8/22 11:25:07

Redis核心数据类型在实际项目中的典型应用场景解析

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取 Redis作为高性能的键值存储系统，在现代软件开发中扮演着重要角色。其多样化的数据结构为开发者提供了灵活的解决方案，本文将通过真实项…...

编程日记 2025/8/19 16:55:07

from aiostream import stream from fastapi import Request from fastapi.responses import StreamingResponse from llama_index.core.chat_engine.types import StreamingAgentChatResponse这四个模块每一个都很实用，在实际开发中经常用到，下面我就详…...

编程日记 2025/8/20 21:31:51

Idea集成AI：CodeGeeX开发

当入职新公司，或者调到新项目组进行开发时，需要快速熟悉项目代码而新的项目代码，可能有很多模块，很多的接口，很复杂的业务逻辑，更加有与之前自己的代码风格不一致的现有复杂代码更别提很多人写代码不喜…...

编程日记 2025/8/22 2:22:13

软考中级软件设计师考点知识点笔记总结 day12 计算机网络基础知识

文章目录计算机网络基础5.1、计算机网络基础知识5.1.1 计算机网络分类5.1.2 七层网络体系结构5.1.3 网络标准5.1.4 TCP/IP协议族5.1.5 IP地址和IPv6简介5.1.6 Internet服务计算机网络基础要求掌握以下内容 5.1、计算机网络基础知识网络体系结构传输介质传输技术传输…...

编程日记 2025/8/20 20:13:06

【扩散模型（十三）】Break-A-Scene 可控生成，原理与代码详解（中）Cross Attn Loss 代码篇

系列文章目录【扩散模型（一）】中介绍了 Stable Diffusion 可以被理解为重建分支（reconstruction branch）和条件分支（condition branch）【扩散模型（二）】IP-Adapter 从条件分支的视…...

编程日记 2025/8/17 18:24:06

C语言数字图像处理---2.31统计滤波器

本文介绍空域滤波器中的一种：统计滤波器 [定义与算法] 统计滤波（Statistic Filter）定义：基于图像处理中的邻域统计方法，对邻域内的像素信息进行统计，如基于均值和方差的信息，用于平滑或去噪图像，同时保留边缘信息。算法步骤如下：统计滤波器的优点和缺点主要包…...

编程日记 2025/8/22 8:12:38

流程设计实战：流程架构设计六步法

目录简介 1、梳理业务模式及场景 2、甄别核心业务能力 3、搭建差异化的业务流程框架 4、定义L4流程能力 5、L4流程串联 6、展开L5业务流程作者简介简介以往在设计流程的时候，我多数都是采用的自下而上的方式，从具体场景、具体问题出发去做流…...

编程日记 2025/8/20 20:22:36

SDK游戏盾如何接入？复杂吗？

接入SDK游戏盾（通常指游戏安全防护类SDK，如防DDoS攻击、防作弊、防外挂等功能）的流程和复杂度取决于具体的服务商（如腾讯云、上海云盾等）以及游戏类型和技术架构。以下是一般性的接入步骤、复杂度评估及注意事项&#…...

编程日记 2025/8/22 7:30:20

STM32F103C8T6 单片机入门基础知识及点亮第一个 LED 灯

目录一、引言二、STM32F103C8T6 基本特性 1. 内核与性能 2. 存储器 3. 时钟系统 4. GPIO（通用输入输出） 5. 外设三、开发环境搭建 1. 硬件准备 2. 软件安装四、点亮第一个 LED 灯 1. 硬件连接 2. 软件实现 （1）创…...

编程日记 2025/8/19 6:04:37

JavaScript Worker池实现教程

JavaScript Worker池实现教程 Worker池是一种管理和复用Web Workers的有效方法，可以在不频繁创建和销毁Worker的情况下，充分利用多线程能力提升应用性能。下面我将详细介绍如何在JavaScript中实现一个功能完善的Worker池。为什么需要Worker池&#xf…...

编程日记 2025/8/16 20:22:18

【统信UOS操作系统】python3.11安装numpy库及导入问题解决

一、安装Python3.11.4 首先来安装Python3.11.4。所用操作系统：统信UOS 前提是准备好Python3.11.4的安装包（可从官网下载（链接）），并解压到本地： 右键，选择“在终端中打开”&#xff…...

编程日记 2025/8/18 20:33:31

Navicat导入JSON数据到MySQL表

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 Navicat导入JSON数据到MySQL表1. 导入入口2.…...

编程日记 2025/8/20 17:00:26

体育比分小程序怎么提示日活

要提高体育比分小程序的日活跃用户(DAU)，您可以考虑以下几个方面的策略： 一、核心功能优化 1.实时推送：确保比分更新真正实时，延迟不超过2秒，推荐接入熊猫比分API体育数据，比分实时更新 2.个性化订阅&am…...

编程日记 2025/8/17 18:24:15

【星海随笔】Python-JSON数据的处理

JSON 是一种轻量级的数据交换格式，主要用于在客户端和服务器之间传输数据。 JSON 在 python 里是一个标准库 https://www.jyshare.com/compile/9/ import json data {name: Alice, age: 30, city: New York} json_string json.dumps(data) print(json_string)js…...

编程日记 2025/8/18 2:24:17

Tomcat与Servlet

目录 1 Tomcat 1.1 目录结构 1.2 启动服务器 1.3 部署 2 Servlet 2.1 创建项目 （1）创建Maven项目 （2）目录结构 （3）引入依赖 （4）创建必要的目录结构 （5&#xf…...

编程日记 2025/8/17 18:24:19

MySQL MVCC工作流程详解

MySQL MVCC工作流程详解 1. 基础概念 MVCC（多版本并发控制）是通过在每行记录后面保存多个版本来实现并发控制的技术，主要用于提供并发事务访问数据库时的读一致性。 2. 核心要素 2.1 事务ID（DB_TRX_ID） 每个事务都…...

编程日记 2025/8/17 19:50:45

unityTEngine 框架学习记录1

目前项目再用QF框架其中的UI部分，突然有天想学习一下其他好用的框架UI，根据我多年网友胖菊大佬的推荐TE映入眼帘,网上找了一下发现学习教程没有几个，不太适合啥都不会的小白，然后我就加入了ET官方群，里面人长得又帅又有…...

编程日记 2025/8/17 20:27:33

算法的时间复杂度

整理了下算法的时间复杂度，跟大家一起分享下。时间复杂度O是表示算法运行时间与输入数据规模（通常用 n 表示）之间的关系。算法执行时间随输入数据规模增长的变化趋势。 1、O(1) — 常数时间无论输入数据多大，执行时间固定不变…...

编程日记 2025/8/21 15:46:10

深度学习从入门到精通 day_01

Pytorch安装 torch安装 python版本3.9.0 在官方文档里面找到适合你设备的PyTorch版本及对应的安装指令执行即可：https://pytorch.org/get-started/previous-versions/ 针对我的网络及设备情况，我复制了如下指令完成了Torch的安装： …...

编程日记 2025/8/21 18:48:44

AutoToM：让AI像人类一样“读心”的突破性方法

引言：AI如何理解人类的“内心世界”？ 如何让AI像人类一样理解他人的意图、情感和动机？这一问题的核心是心智理论（Theory of Mind, ToM），即通过观察行为推断心理状态的能力。近日，约翰霍普金斯大…...

编程日记 2025/8/20 8:14:47

Java实现Redis

String类型代码 package com.whop.changyuan2.redisTest;import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.data.redis.cor…...

编程日记 2025/8/20 22:16:08

参数传递

Query方式

Params方式

State方式

总结

1. Params 方式 (/user/:id)

2. Query 方式 (/user?name=xiaoman)

3. State 方式

相关文章：

1. Params 方式 (`/user/:id`)

2. Query 方式 (`/user?name=xiaoman`)