import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

const App = () => {
  const location = useLocation();

  useEffect(() => {
    // 每次路由切換時(shí)執(zhí)行
    console.log('當(dāng)前路徑：', location.pathname);
    console.log('搜索參數(shù)：', location.search);
  }, [location]); 
};

const navigate = useNavigate();

// 基礎(chǔ)跳轉(zhuǎn)，帶狀態(tài)
navigate('/profile', { replace: true, state: { from: 'home' } });

// 歷史記錄操作
navigate(-1); // 后退一步

import { useLocation, useNavigate, useEffect } from 'react-router-dom';
import { isLogin } from '@/utils/auth'; // 自定義登錄校驗(yàn)函數(shù)

// 全局路由守衛(wèi)組件
const GlobalRouterGuard = () => {
  const location = useLocation();
  const navigate = useNavigate();
  // 無需登錄的白名單路由
  const whiteList = ['/login', '/register'];

  useEffect(() => {
    // 未登錄且不在白名單 → 跳轉(zhuǎn)到登錄頁
    if (!isLogin() && !whiteList.includes(location.pathname)) {
      navigate('/login', { 
        replace: true,
        state: { from: location.pathname } // 記錄來源路徑，登錄后跳轉(zhuǎn)回去
      });
    }
  }, [location.pathname, navigate]);

  return null; // 守衛(wèi)組件無需渲染 DOM
};

// 在根路由中引入
// <BrowserRouter>
//   <GlobalRouterGuard />
//   <Routes>...</Routes>
// </BrowserRouter>

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { hasPermission } from '@/utils/permission'; // 自定義權(quán)限校驗(yàn)

const UserDetail = () => {
  const navigate = useNavigate();

  // 進(jìn)入守衛(wèi)：組件掛載時(shí)校驗(yàn)權(quán)限
  useEffect(() => {
    if (!hasPermission('user:view')) {
      navigate('/403', { replace: true });
    }
  }, [navigate]);

  // 離開守衛(wèi)：組件卸載時(shí)執(zhí)行（如保存表單、提示未提交內(nèi)容）
  useEffect(() => {
    return () => {
      console.log('離開用戶詳情頁，執(zhí)行清理邏輯');
      // 業(yè)務(wù)邏輯：保存草稿、關(guān)閉WebSocket等
    };
  }, []);

  return <div>用戶詳情頁</div>;
};

// 守衛(wèi)組件：AdminGuard.jsx
import { useNavigate } from 'react-router-dom';
import { isAdmin } from '@/utils/auth';

const AdminGuard = ({ children }) => {
  const navigate = useNavigate();
  
  // 管理員權(quán)限校驗(yàn)
  if (!isAdmin()) {
    navigate('/403', { replace: true });
    return null;
  }

  // 權(quán)限通過，渲染子組件
  return children;
};

// 路由配置中使用
import { Routes, Route } from 'react-router-dom';
import SettingsPage from '@/pages/Settings';

const RouterConfig = () => {
  return (
    <Routes>
      {/* 獨(dú)享守衛(wèi)：僅 /settings 路由觸發(fā)管理員校驗(yàn) */}
      <Route 
        path="/settings" 
        element={
          <AdminGuard>
            <SettingsPage />
          </AdminGuard>
        } 
      />
    </Routes>
  );
};

import { useBlocker } from 'react-router-dom';

// blockerFn：返回 true 攔截跳轉(zhuǎn)，false 放行
// when：是否啟用攔截（可選，默認(rèn) true）
useBlocker((tx) => {
  console.log('即將跳轉(zhuǎn)到：', tx.location.pathname);
  return true; // 攔截跳轉(zhuǎn)
}, when);

import { useBlocker } from 'react-router-dom';

const FormPage = () => {
  const [formDirty, setFormDirty] = useState(false); // 表單是否修改

  // 表單未提交時(shí)攔截跳轉(zhuǎn)
  useBlocker((tx) => {
    if (formDirty) {
      const confirm = window.confirm('表單內(nèi)容未保存，是否確認(rèn)離開？');
      return !confirm; // 點(diǎn)擊取消 → 攔截（返回 true）
    }
    return false; // 放行
  }, formDirty); // 僅表單修改時(shí)啟用攔截

  return (
    <form onChange={() => setFormDirty(true)}>
      <input type="text" placeholder="輸入內(nèi)容..." />
    </form>
  );
};