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

注：如有錯誤地方，歡迎批評指正