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

一、useLocation基础用法

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

javascript 复制代码
{
  pathname: "/about",       // 当前路径
  search: "?name=john",     // 查询参数(URL参数)
  hash: "#contact",         // URL哈希值
  state: { from: "/home" }, // 路由跳转时传递的 state
  key: "abc123"             // 唯一标识当前 location 的 key
}
javascript 复制代码
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、导航高亮(根据路径匹配)

javascript 复制代码
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参数)

javascript 复制代码
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页面浏览追踪(埋点)

javascript 复制代码
function AnalyticsTracker() {
  const location = useLocation();

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

  return null;
}

三、useLocation进阶用法

1、结合 useEffect 监听路由变化

javascript 复制代码
function ScrollToTop() {
  const location = useLocation();

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

  return null;
}

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

javascript 复制代码
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 传递隐式数据

javascript 复制代码
// 跳转时传递 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 对比

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

javascript 复制代码
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>
  );
}

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

相关推荐
前端Hardy13 分钟前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html
我是哈哈hh25 分钟前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式
高端章鱼哥28 分钟前
分享一个 MySQL binlog 分析小工具
前端
Ronin-Lotus29 分钟前
上位机知识篇---AJAX
前端·javascript·ajax
Rika33 分钟前
手写mini-vue之后,我写了一份面试通关手册
前端·vue.js
我想说一句34 分钟前
使用React开发拉布布旅游智能聊天机器人的实践
前端·前端框架
wwy_frontend34 分钟前
积累:04-VUE2
前端
拾光拾趣录34 分钟前
箭头函数 vs 普通函数:从“this 指向混乱”到写出真正健壮的代码
前端·javascript
一只毛驴36 分钟前
浏览器中的事件冒泡,事件捕获,事件委托
前端·面试
lixin40 分钟前
使用 MCP 协议扩展 Cursor 功能:原理解析与实战指南
前端