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

React 第三十四节 Router 开发中 useLocation Hook 的用法以及案例详解

一、useLocation基础用法

作用:获取当前路由的 location 对象
返回对象结构:

{pathname: "/about",       // 当前路径search: "?name=john",     // 查询参数(URL参数)hash: "#contact",         // URL哈希值state: { from: "/home" }, // 路由跳转时传递的 statekey: "abc123"             // 唯一标识当前 location 的 key
}
import { useLocation } from 'react-router-dom';function CurrentPath() {const location = useLocation();return (<div><h2>当前路径信息:</h2><p>路径:{location.pathname}</p><p>参数:{location.search}</p><p>哈希:{location.hash}</p><p>State数据:{JSON.stringify(location.state)}</p></div>);
}

二、useLocation核心使用场景

1、导航高亮(根据路径匹配)

function NavLink() {const location = useLocation();return (<nav><Link to="/" className={location.pathname === '/' ? 'active' : ''}>首页</Link><Link to="/about" className={location.pathname.startsWith('/about') ? 'active' : ''}>关于我们</Link></nav>);
}

2、useLocation获取查询参数(URL参数)

function UserList() {const location = useLocation();const searchParams = new URLSearchParams(location.search);const page = searchParams.get('page') || 1;const filter = searchParams.get('filter') || 'all';// 根据 page 和 filter 请求数据useEffect(() => {fetchData({ page, filter });}, [location.search]); // 监听 URL 参数变化return <div>{/* 渲染列表 */}</div>;
}

3、useLocation页面浏览追踪(埋点)

function AnalyticsTracker() {const location = useLocation();useEffect(() => {// 每次路由变化时发送统计analytics.trackPageView(location.pathname);}, [location]);return null;
}

三、useLocation进阶用法

1、结合 useEffect 监听路由变化

function ScrollToTop() {const location = useLocation();useEffect(() => {// 每次路由变化时滚动到顶部window.scrollTo(0, 0);}, [location.pathname]); // 仅在路径变化时触发return null;
}

2、解析复杂查询参数(推荐使用 URLSearchParams

const searchParams = new URLSearchParams(location.search);
const params = Object.fromEntries(searchParams.entries());// 示例 URL: /products?category=electronics&price=100-500
// 输出:{ category: 'electronics', price: '100-500' }

3、 通过 state 传递隐式数据

// 跳转时传递 state
<Link to="/checkout" state={{ from: 'cart', discount: 20 }}>去结算</Link>// 目标组件接收
function CheckoutPage() {const location = useLocation();const { from, discount } = location.state || {};
}

四、useLocation使用注意事项

1、不可在类组件中使用
useLocation 是 React Hook,只能在函数组件或自定义 Hook 中使用

2、避免直接修改 location 对象
该对象是只读的,修改不会影响实际路由
3、state 安全性
通过 location.state 传递的数据会存储在浏览器历史记录中,敏感数据应避免使用

4、Key 的特性
每个 location.key 唯一标识一次导航,可用于跟踪用户历史操作

五、与相关 API 对比

在这里插入图片描述

完整示例:带参数过滤的商品列表

function ProductList() {const location = useLocation();const navigate = useNavigate();const searchParams = new URLSearchParams(location.search);// 获取参数const category = searchParams.get('category') || 'all';const sort = searchParams.get('sort') || 'price_asc';// 模拟数据过滤const filteredProducts = filterProducts(category, sort);// 更新 URL 参数const handleFilterChange = (newCategory) => {const params = new URLSearchParams(location.search);params.set('category', newCategory);navigate({ search: params.toString() });};return (<div><FilterControls currentCategory={category}onChange={handleFilterChange}/><ProductGrid products={filteredProducts} /></div>);
}

注:如有错误地方,欢迎批评指正

相关文章:

React 第三十四节 Router 开发中 useLocation Hook 的用法以及案例详解

一、useLocation基础用法 作用&#xff1a;获取当前路由的 location 对象 返回对象结构&#xff1a; {pathname: "/about", // 当前路径search: "?namejohn", // 查询参数&#xff08;URL参数&#xff09;hash: "#contact", …...

BT134-ASEMI机器人功率器件专用BT134

编辑&#xff1a;LL BT134-ASEMI机器人功率器件专用BT134 型号&#xff1a;BT134 品牌&#xff1a;ASEMI 封装&#xff1a;TO-126 批号&#xff1a;最新 引脚数量&#xff1a;3 封装尺寸&#xff1a;如图 特性&#xff1a;双向可控硅 工作结温&#xff1a;-40℃~150℃…...

十五种光电器件综合对比——《器件手册--光电器件》

十五、光电器件 名称 原理 特点 应用 发光二极管&#xff08;LED&#xff09; 基于半导体材料的电致发光效应&#xff0c;当电流通过时&#xff0c;电子与空穴复合&#xff0c;释放出光子。 高效、节能、寿命长、响应速度快、体积小。 广泛用于指示灯、照明、显示&#…...

网络安全攻防演练实训室建设方案

一、引言 在数字化浪潮席卷全球的当下&#xff0c;网络已深度融入社会的各个层面&#xff0c;成为推动经济发展、社会进步和科技创新的关键力量。从日常生活中的移动支付、社交互动&#xff0c;到企业运营中的数据管理、业务拓展&#xff0c;再到国家关键基础设施的运行&#…...

极客天成受邀参加2050大会,共赴人工智能科技盛宴

2025年4月25日&#xff0c;备受瞩目的2050大会在杭州云栖小镇盛大开幕。作为科技领域的佼佼者&#xff0c;北京极客天成科技有限公司受邀参加了此次盛会&#xff0c;与全球科技爱好者共同探索科技的未来。 大会盛况空前&#xff0c;科技盛宴开启 2050大会是由杭州市云栖科技创…...

GUI_DrawPixel 函数详解

GUI_DrawPixel 是嵌入式GUI库中的基础像素绘制函数&#xff0c;用于在指定坐标绘制单个像素点。下面我将详细介绍这个函数的功能、实现和使用方法。 1. 函数功能 在显示屏的指定位置(x,y)绘制一个像素点 使用当前设定的颜色进行绘制 是构建所有高级图形&#xff08;线、圆、…...

AWS MSK 集群升级前配置检查:保障升级平稳进行的关键步骤

在 AWS Managed Streaming for Apache Kafka (MSK) 集群升级之前,进行全面的配置检查至关重要。本文将介绍一个用于 MSK 升级前配置检查的 Bash 脚本,帮助您识别潜在的风险点,确保升级过程的顺利进行。 为什么需要升级前检查? AWS MSK 提供了自动升级功能,但在升级过程中,不…...

leetcode 2516. 每种字符至少取 K 个

题目描述 滑动窗口问题 可以转化为求按照题目要求从两端取走字符后&#xff0c;中间部分的最大长度。中间部分就是一个滑动窗口。 class Solution { public:int takeCharacters(string s, int k) {vector<int> count(3,0);int n s.size();for(int i 0;i <n;i){cou…...

通信原理第七版与第六版区别附pdf

介绍 我用夸克网盘分享了「通信原理 第7版》樊昌信」&#xff0c;链接&#xff1a;https://pan.quark.cn/s/be7c5af4cdce 《通信原理&#xff08;第7版&#xff09;》是在第6版的基础上&#xff0c;为了适应当前通信技术发展和教学需求&#xff0c;并吸取了数十所院校教师的反…...

CPU 空转解析

在编程中&#xff0c;“避免 CPU 空转” 指的是防止程序在等待某个条件满足时&#xff0c;无意义地消耗 CPU 资源。以下是对这一问题的详细解释&#xff1a; 1. 什么是 CPU 空转&#xff1f; 当代码中出现类似以下逻辑时&#xff1a; while not condition_met: # 循环检查条…...

云蝠智能大模型智能呼叫:赋能零售行业服务,助力客户增长

在数字化浪潮席卷全球的今天&#xff0c;零售行业正面临前所未有的变革压力。消费者需求日益个性化、市场竞争愈发激烈&#xff0c;传统的人工客服模式已难以满足企业对高效触达、精准营销和极致体验的需求。而云蝠智能大模型智能呼叫系统&#xff0c;凭借其突破性的AI技术和深…...

Consul安装部署(Windows环境)

部署资料链接&#xff1a;https://download.csdn.net/download/ly1h1/90722829​​​​​ 1.下载 Consul 1.访问 Consul 官方下载页面&#xff1a;Install | Consul | HashiCorp Developer 2.选择适合 Windows 的版本&#xff08;如 consul_1.16.1_windows_amd64.zip&#xff…...

Sql刷题日志(day7)

面试&#xff1a; 1、怎么样的数据挖取能真正对业务起到指导作用&#xff1f; 明确的业务目标&#xff1a;开始之前明确你想通过数据挖掘解决的业务问题。这些问题应具体、可量化&#xff0c;并与业务战略紧密相关。正确的数据集&#xff1a;确保使用的数据与你的业务问题相关…...

【MuJoCo仿真】开源SO100机械臂导入到仿真环境

主要参考&#xff1a;https://github.com/jpata/gym-so100/tree/integration/gym_so100/assets/trs_so_arm100 参考&#xff1a;&#xff08;八&#xff09;lerobot开源项目扩展so100的仿真操控&#xff08;操作记录&#xff09;_so100机械臂 仿真-CSDN博客 下载&#xff1a;…...

redis 有序集合zrange和zrangebyscore的区别

起因是查询数据&#xff0c;用了zrangebyscore 但是一直显示没数据 具体命令zrangebyscore key 0 -1 withscores, 原有印象中一直是这么用的&#xff0c;但是突然查不出来了&#xff0c; 于是搜了下问题所在。 通过分数查看 不能用0和-1表示最小和最大&#xff0c;只能用分数来…...

基于C#窗体+GDI+绘图实现分形树

实验&#xff1a;分形树 一. 引言 实验目的:继续学习C#窗体应用程序的图形化界面设计以及GDI绘图的一些基本指示,通过制作各种类型的分形树增强对于递归的理解,在创造分形图形的过程中感受编程的快乐 Tutorial任务 1.制作不同类型的分形图形(本次演示的是两种不同类型的分…...

使用Langchain+DeepSeep进行测试相关工作

1.使用BaseChatModel实现自定义DeepSeekLLM import json import typing from typing import Optional, Any, List, Dict, Union, Sequence, Callable, Literalimport requests from langchain_core.callbacks import CallbackManagerForLLMRun from langchain_core.language_m…...

Java练习6

一.题目 数字加密与解密 需求: 某系统的数字密码&#xff08;大于 0&#xff09;&#xff0c;比如 1983&#xff0c;采用加密方式进行传输。 规则如下: 先得到每位数&#xff0c;然后每位数都加上 5&#xff0c;再对 10 求余&#xff0c;最后将所有数字反转&#xff0c;得到一…...

二叉树知识点

1、树形结构 1.1概念 二叉树属于树形结构&#xff0c;所以先了解树形结构之后&#xff0c;再学习二叉树。 树形结构是一种非线性的数据结&#xff0c;是由n个有限节点组成的一个具有层次关系的集合&#xff0c;其形状就像一棵到这的树&#xff0c;跟朝上&#xff0c;叶子朝下…...

neo4j暴露公网ip接口——给大模型联通知识图谱

特别鸣谢 我的领导&#xff0c;我的脑子&#xff0c;我的学习能力&#xff0c;感动了 1. 搭建知识图谱数据库&#xff08;见上一章博客&#xff09; 这里不加赘述了&#xff0c;请参考上一篇博客搭建 2. FastApi包装接口 这里注意&#xff1a;NEO4J_URI不得写http:,只能写…...

在阿里云实例上部署通义千问QwQ-32B推理模型

通义千问QwQ-32B是阿里云开源的320亿参数推理模型,通过大规模强化学习在数学推理、编程及通用任务中实现性能突破,支持消费级显卡本地部署,兼顾高效推理与低资源消耗。 本文将介绍如何利用vLLM作为通义千问QwQ-32B模型的推理框架,在一台阿里云GPU实例上构建通义千问QwQ-32…...

GEE进行Theil-Sen Median斜率估计和Mann-Kendall检验

介绍一下Theil-Sen Median斜率估计和Mann-Kendall趋势分析&#xff0c;这两种方法经常结合使用&#xff0c;前者用于估计趋势的斜率&#xff0c;后者用于检验趋势的显著性。如多年NPP或者NDVI的趋势分析。 主要介绍使用GEE实现这一内容的代码方法&#xff0c;若使用python&…...

WSL2下Docker desktop的Cadvisor容器监控

由于WSL2的Docker存放是在Linux的docker-desktop目录下&#xff0c;需要从这里面挂载到WSL2里的/var/lib/docker&#xff0c;并且正确挂载启动&#xff0c;才能使 Cadvisor 识别到docker容器并且监控资源。 首先需要在WSL2终端进行挂载操作&#xff1a; sudo mount -t drvfs \…...

深度学习---pytorch搭建深度学习模型(附带图片五分类实例)

一、PyTorch搭建深度学习模型流程 1. 环境准备 安装PyTorch及相关库&#xff1a; pip install torch torchvision numpy matplotlib2. 数据准备 数据集加载&#xff1a;使用内置数据集&#xff08;如CIFAR-10&#xff09;或自定义数据集。数据预处理&#xff1a;包括归一化…...

基于 STM32 的智慧图书馆智能控制系统设计与实现

一、系统架构概述 智慧图书馆智能控制系统集成环境调控、安全监控、借阅管理与信息推送功能,通过 STM32 主控芯片联动传感器、执行器及云平台,实现图书馆智能化管理。系统架构分为感知层(传感器)、控制层(STM32 主控)、执行层(继电器 / 显示屏)及云端层(数据交互),…...

4. python3基本数据类型

Python3 中有六个标准的数据类型&#xff1a; Number&#xff08;数字&#xff09; String&#xff08;字符串&#xff09; List&#xff08;列表&#xff09; Tuple&#xff08;元组&#xff09; Set&#xff08;集合&#xff09; Dictionary&#xff08;字典&#xff09; Pyt…...

什么是缓冲区溢出?NGINX是如何防止缓冲区溢出攻击的?

大家好&#xff0c;我是锋哥。今天分享关于【什么是缓冲区溢出&#xff1f;NGINX是如何防止缓冲区溢出攻击的&#xff1f;】面试题。希望对大家有帮助&#xff1b; 什么是缓冲区溢出&#xff1f;NGINX是如何防止缓冲区溢出攻击的&#xff1f; 缓冲区溢出是指程序试图向一个固定…...

4.27搭建用户界面

更新 router下面的index.js添加新的children 先区分一下views文件夹下的不同vue文件&#xff1a; Home.vue是绘制home页面的所有的表格。 Main.vue是架构头部和左侧目录的框架的。 研究一下这个routes对象&#xff0c;就可以发现重定向redirect的奥妙所在&#xff0c;我们先把…...

常用回环检测算法对比(SLAM)

回环检测本质上是一种数据相似性检测算法,原理是通过识别机器人是否回到历史位置,建立位姿约束以优化全局地图,纠正长期的里程计漂移实现全局地图的一致性,简单讲就是识别场景中的重复特征以修正累积误差。 1. 概述 算法类别原理特点优势劣势词袋模型特征聚类为单词,TF-I…...

《从线性到二维:CSS Grid与Flex的布局范式革命与差异解析》

在前端开发的广袤宇宙中&#xff0c;CSS布局技术宛如闪耀的星辰&#xff0c;不断革新与演进&#xff0c;为构建绚丽多彩的网页世界提供了坚实的支撑。其中&#xff0c;CSS Grid布局与Flex布局作为两颗璀璨的明星&#xff0c;以其独特的魅力和强大的功能&#xff0c;深受开发者们…...

理解 EKS CloudWatch Pod CPU Utilization 指标:与 `kubectl top` 及节点 CPU 的关系

在使用 AWS EKS 时&#xff0c;CloudWatch Container Insights 提供了丰富的容器级别监控指标&#xff0c;帮助我们深入了解应用的运行状态。如下截图中的 ContainerInsights pod_cpu_utilization 指标就是一个非常重要的维度。本文将详细解释这个指标的含义&#xff0c;并将其…...

解读JetBrains ToolBox以及Windows环境AppData的那点事

AppData 顾名思义应用程序数据&#xff0c;指的就是程序运行实例数据。用于存储应用程序的自定义设置和缓存数据。这些数据不仅包括程序个性化的配置&#xff0c;还涵盖了在应用程序运行过程中产生的临时文件和日志信息。 本身它是一个隐藏文件夹&#xff0c;位于每个用户的个人…...

Elasticsearch:ES|QL lookup JOIN 介绍 - 8.18/9.0

警告&#xff1a;此功能在 8.18/9.0 中刚推出。此功能处于技术预览阶段&#xff0c;未来版本可能会更改或删除。Elastic 会努力修复任何问题&#xff0c;但技术预览中的功能不受正式 正式发布功能支持 SLA 的约束。 ES|QL LOOKUP JOIN 处理命令将你的 ES|QL 查询结果表中的数据…...

基于开闭原则优化数据库查询语句拼接方法

背景 在开发实践中&#xff0c;曾有同事在实现新功能时&#xff0c;因直接修改一段数据库查询条件拼接方法的代码逻辑&#xff0c;导致生产环境出现故障。 具体来看&#xff0c;该方法通过在函数内部直接编写条件判断语句实现查询拼接&#xff0c;尽管从面向对象设计的开闭原…...

无人机航拍牛只检测数据集VOC+YOLO格式906张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;906 标注数量(xml文件个数)&#xff1a;906 标注数量(txt文件个数)&#xff1a;906 标注…...

【LeetCode 560】和为K的子数组(前缀和+哈希)

题面&#xff1a; 思路&#xff1a; 看到连续非空序列之和&#xff0c;容易想到前缀和计算差分&#xff0c; n u m s nums nums 区间 [ j , i ] [j,i] [j,i] 的和即为&#xff1a; s u m ( i , j ) p r e [ i ] − p r e [ j − 1 ] sum(i, j) pre[i] - pre[j-1] sum(i,j)…...

手术中评估帕金森患者手部运动的无接触式系统

南开大学韩建达教授研究团队提出一种针对帕金森病手术治疗的评估系统&#xff0c;可在手术中对患者手部运动进行实时监测&#xff0c;实现无接触式运动特征提取&#xff0c;并结合可视化数据分析辅助临床决策。相关研究论文“A non-contact system for intraoperative quantita…...

服务器主动发送响应?聊天模块如何实现?

一、背景知识 当我们在某聊天界面中发送一个消息时&#xff0c;如A给B发送了一个消息&#xff0c;而B马上就收到&#xff0c;仔细思考会发现以下问题 &#xff1a; 1. A给服务器发送请求&#xff0c;但服务器却给B发送了响应 2.B没有向服务器发送请求&#xff0c;却收到了…...

服务器远程超出最大连接数的解决方案是什么?

以下是为您撰写的关于服务器远程连接超限问题的解决方案论文&#xff0c;包含技术原理分析、解决策略和实际应用案例&#xff1a; 服务器远程连接超限问题分析与多维解决方案研究 摘要 随着数字化转型进程加速&#xff0c;服务器远程连接过载问题已成为企业IT运维领域的重大挑…...

【资料分享】全志T536(异构多核ARMCortex-A55+玄铁E907 RISC-V)工业核心板硬件说明书

前 言 本文为创龙科技SOM-TLT536工业核心板硬件说明书,主要提供SOM-TLT536工业核心板的产品功能特点、技术参数、引脚定义等内容,以及为用户提供相关电路设计指导。 为便于阅读,下表对文档出现的部分术语进行解释;对于广泛认同释义的术语,在此不做注释。...

Missashe考研日记-day30

Missashe考研日记-day30 0 写在前面 日记也是写到第30篇了哈哈&#xff0c;满月了&#xff0c;虽然过了不止30天中间有断更&#xff0c;但还是表扬一下自己坚持下来了。&#xff1a;&#xff09; 1 专业课408 学习时间&#xff1a;2h30min学习内容&#xff1a; 今天有其他事…...

工程管理部绩效考核关键指标与项目评估

工程管理部的关键绩效考核指标(KPI)设计旨在全面评估部门在设施设备管理、特种设备保养、维修质量以及业主满意度等方面的工作表现。每个指标都与部门的日常运营紧密相关&#xff0c;直接影响到设施的维护质量和业主的满意度。 本文将深入探讨工程管理部的主要绩效考核指标&am…...

【沉浸式求职学习day29】【信科知识面试题第一部分】【新的模块,值得收藏】

快五一辣&#xff0c;大家什么安排呀哈哈哈~可能五一期间我就不更新啦&#xff0c;时间比较碎片化&#xff0c;要陪重要的人 沉浸式求职学习 理论攻坚-计算机基础知识1.诞生2.发展3.特点4.分类巨型 5.应用计算机辅助&#xff1a; 6.计算机的性能指标7.信息的存储单位 理论攻坚…...

Cliosoft安装

创建安装目录、解压 [rootedatest opt]# mkdir Cliosoft [rootedatest opt]# mv sos_7.05.p9/ Cliosoft/ [rootedatest opt]# cd Cliosoft/ [rootedatest Cliosoft]# cd sos_7.05.p9/ [rootedatest sos_7.05.p9]# tar -xf sos_7.05.p9_linux64.tar 用普通用户eda安装 [rooteda…...

MES管理系统:重构生产任务管理的数智化引擎

在制造业的数字化浪潮中&#xff0c;生产任务管理正从传统的经验驱动转向数据驱动的精细化模式。作为连接计划层与执行层的核心枢纽&#xff0c;MES管理系统通过智能化、动态化的管理手段&#xff0c;将生产任务的接收、分配、执行与优化融入全流程闭环&#xff0c;为企业打造透…...

推荐系统在线离线打分不一致:核心原因与全链路解决方案

目录 一、特征维度&#xff1a;数据处理的「隐形杀手」1.1 特征穿越&#xff1a;训练数据的「上帝视角」1.2 线上线下特征不一致的四大陷阱&#xff08;1&#xff09;上线前一致性校验缺失&#xff08;2&#xff09;线上特征监控体系缺位&#xff08;3&#xff09;特征更新延迟…...

Markdown转WPS office工具pandoc实践笔记

随着DeepSeek、文心一言、讯飞星火等AI工具快速发展&#xff0c;其输出网页内容拷贝到WPS Office过程中&#xff0c;文档编排规整的格式很难快速复制。 注&#xff1a;WPS Office不支持Markdown格式&#xff0c;无法识别式样。 在这里推荐个免费开源工具Pandoc&#xff0c;实现…...

记录java线程中断理解,Thread.currentThread().interrupt();

记录java线程中断理解&#xff0c;Thread.currentThread().interrupt(); 一、概述 中断的理解&#xff1a; 1、Java 线程中断&#xff0c;协作式&#xff08;通过 Thread.interrupt() 触发&#xff0c;需代码显式检查中断状态或调用可中断方法&#xff09;。 2、操作系统中断…...

[零基础]内网ubuntu映射到云服务器上,http访问(frp内网穿透)

阿里云服务器&#xff0c;高校教师可以半价&#xff0c; frp下载地址&#xff1a;https://github.com/fatedier/frp/releases&#xff0c;选amd64&#xff0c; 云服务器开放端口 选择网络与安全–>安全组->管理规则 配置开放端口&#xff0c;7000为支持frp开放的端口&…...

Nginx 核心功能笔记

目录 一、Nginx 简介 二、核心功能详解 三、关键指令解析 四、性能优化要点 五、常见应用场景 一、Nginx 简介 定位 高性能的 HTTP/反向代理服务器&#xff0c;同时支持邮件协议代理&#xff08;IMAP/POP3/SMTP&#xff09;。采用 事件驱动、异步非阻塞 架构&#xff0c;…...