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

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

news 来源：原创 2025/4/30 5:29:20

一、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>);
}