window.location.pathname  // "/path"
window.location.search   // "?search=test"
window.location.hash     // "#hash"

window.addEventListener('popstate', (event) => {
  console.log('歷史記錄變化:', event);
});

+------------------------+     注冊(cè)     +-------------------------+
|                        |  -------->  |      路由守衛(wèi)映射        |
|  registerGuard('/admin')|            | Map<路徑, 守衛(wèi)函數(shù)>      |
|                        |            |                         |
+------------------------+            | '/admin' => checkAdmin  |
                                     | '/user'  => checkUser   |
                                     +-------------------------+
                                              |
                                              | 監(jiān)聽(tīng)
                                              ↓
+------------------------+     觸發(fā)     +-------------------------+
|    路由變化事件          | -------->  |     路由守衛(wèi)檢查          |
|  1. history.pushState  |            | 1. 獲取當(dāng)前路徑           |
|  2. popstate          |            | 2. 查找匹配的守衛(wèi)函數(shù)      |
|                       |            | 3. 執(zhí)行守衛(wèi)邏輯           |
+------------------------+            +-------------------------+
                                              |
                                              | 結(jié)果
                                              ↓
                                    +-------------------------+
                                    |         處理結(jié)果          |
                                    | true  → 允許訪(fǎng)問(wèn)         |
                                    | false → 重定向到登錄頁(yè)    |
                                    +-------------------------+

const routeGuards = new Map(); // 用一個(gè) map 將所有守衛(wèi)維護(hù)起來(lái)

// 注冊(cè)路由守衛(wèi)
export function registerGuard(path, guard) {
  routeGuards.set(path, guard);
}

registerGuard('/user', () => {
  const isLoggedIn = checkAuth();
  if (!isLoggedIn) {
    alert('請(qǐng)先登錄！');
    return false;
  }
  return true;
});

export function setupRouteGuard() {
  // 初始狀態(tài)檢查
  checkCurrentRoute();
  
  // 監(jiān)聽(tīng) popstate 事件（瀏覽器前進(jìn)/后退）
  window.addEventListener('popstate', checkCurrentRoute);
  
  // 攔截 history.pushState
  const originalPushState = history.pushState;
  history.pushState = function(...args) {
    const result = originalPushState.apply(this, args);
    checkCurrentRoute();
    return result;
  };
}

function checkCurrentRoute() {
  const currentPath = window.location.pathname;
  
  for (const [path, guard] of routeGuards) {
    if (currentPath.startsWith(path)) {
      // 執(zhí)行用戶(hù)注冊(cè)的回調(diào)函數(shù)
      const result = guard({
        to: currentPath,
        from: document.referrer,
      });
      
      // 如果回調(diào)返回 false，則中斷導(dǎo)航，比如調(diào)到其他未授權(quán)頁(yè)面，或者錯(cuò)誤提示什么的
      if (result === false) {
        return;
      }
    }
  }
}

function useNavigate() {
  const navigate = useCallback((to, options = {}) => {
    // 更新URL， 添加新的歷史記錄
    window.history.pushState(state, '', to);

    // 觸發(fā)自定義事件通知路由變化
    window.dispatchEvent(new CustomEvent('routechange', {
      detail: {
        pathname: window.location.pathname,
        search: window.location.search,
        hash: window.location.hash,
        state
      }
    }));
  }, []);

  return navigate;
}

 const navigate = useNavigate();
 navigate(`/search`);

function useLocation() {
  const [location, setLocation] = useState(() => ({
    pathname: window.location.pathname,
    search: window.location.search,
    hash: window.location.hash,
    state: window.history.state
  }));

  useEffect(() => {
    // 監(jiān)聽(tīng) popstate 事件（瀏覽器前進(jìn)/后退時(shí)觸發(fā)）
    const handlePopState = () => {
      setLocation({
        pathname: window.location.pathname,
        search: window.location.search,
        hash: window.location.hash,
        state: window.history.state
      });
    };

    // 監(jiān)聽(tīng)自定義的路由變化事件
    const handleRouteChange = (event) => {
      setLocation(event.detail);
    };

    window.addEventListener('popstate', handlePopState);
    window.addEventListener('routechange', handleRouteChange);

    return () => {
      window.removeEventListener('popstate', handlePopState);
      window.removeEventListener('routechange', handleRouteChange);
    };
  }, []);

  return location;
}

function ProductSearch() {
  const [searchParams] = useSearchParams();
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 從 URL 獲取查詢(xún)參數(shù)
    const keyword = searchParams.get('keyword');
    const price = searchParams.get('price');
    const brand = searchParams.get('brand');

    // 如果有查詢(xún)參數(shù)，則發(fā)起請(qǐng)求
    if (keyword || price || brand) {
      fetchProducts();
    }
  }, [searchParams]); // 當(dāng) URL 參數(shù)變化時(shí)重新請(qǐng)求

  const fetchProducts = async () => {
    try {
      setLoading(true);
      // 構(gòu)建查詢(xún)參數(shù)
      const params = new URLSearchParams(searchParams);
      
      // 發(fā)起請(qǐng)求
      const response = await fetch(`/api/products?${params}`);
      const data = await response.json();
      setProducts(data);
    } catch (error) {
      console.error('查詢(xún)失敗:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h2>搜索結(jié)果</h2>
      {loading ? (
        <div>加載中...</div>
      ) : (
        <div className="product-list">
          {products.map(product => (
            <div key={product.id} className="product-item">
              <h3>{product.name}</h3>
              <p>價(jià)格: ￥{product.price}</p>
              <p>品牌: {product.brand}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

import { useState, useCallback, useEffect } from 'react';

function useSearchParams() {
  const [params, setParams] = useState(() => 
    new URLSearchParams(window.location.search)
  );

  const setSearchParams = useCallback((update) => {
    // 處理更新
    const newParams = new URLSearchParams(
      typeof update === 'object' ? update : update(params)
    );
    
    // 更新 URL 和狀態(tài)
    history.pushState(null, '', `?${newParams}`);
    setParams(newParams);
  }, [params]);

  // 簡(jiǎn)化歷史監(jiān)聽(tīng)
  useEffect(() => {
    const syncParams = () => setParams(new URLSearchParams(location.search));
    window.addEventListener('popstate', syncParams);
    return () => window.removeEventListener('popstate', syncParams);
  }, []);

  return [params, setSearchParams];
}

export default useSearchParams;

const location = useLocation();

useEffect(()=>{
}, [location.state])

const memoizedState = useMemo(() => {
  return location.state;
}, [location.state?.source, location.state?.timestamp]); // 只監(jiān)聽(tīng)需要的屬性

useEffect(() => {
  if (id) {
    handleProductDetail(id, memoizedState);
  }
}, [id, memoizedState]);

useEffect(() => {
  // 一些操作
}, [id, JSON.stringify(location.state)]);