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

一、useLocation基础用法

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

{
  pathname: "/about",       // 当前路径
  search: "?name=john",     // 查询参数（URL参数）
  hash: "#contact",         // URL哈希值
  state: { from: "/home" }, // 路由跳转时传递的 state
  key: "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>
  );
}

注：如有错误地方，欢迎批评指正