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

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

相关推荐
伍哥的传说22 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783824 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊35 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
马特说2 小时前
React金融数据分析应用性能优化实战:借助AI辅助解决18万数据量栈溢出Bug
react.js·金融·数据分析
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript