路由攔截

react-router中沒有直接給出攔截路由的方法，需要手動的去監聽路由的變化來攔截路由

路由攔截的要點：

• 能夠識別出目標路由和原始路由（區分跳轉前和跳轉后）
• 能夠在跳轉時（跳轉前或者跳轉后）執行一些操作，比如阻止路由，或者附帶參數等等

?根據上面的要求，可以使用useLocation和useEffect鉤子函數快速實現，

useLocation會返回當前路由路徑的對象，它包含以下參數

location.hash

????????當前 URL 的哈希值。

location.key

????????此位置的唯一鍵。

location.pathname

????????當前 URL 的路徑。

location.search

????????當前 URL 的查詢字符串（？后的參數部分）。

location.state

????????由?<Link state>?或?navigate?創建的位置的狀態值。

?在跳轉前后使用useLocation就可以記錄跳轉前后的URL路徑，再通過useEffect鉤子監聽URL，就能實現路由變化時執行一些操作，這樣就達成了路由攔截的兩個條件

路由示例

使用react-router提供的useLocation，useNavigate鉤子函數，模擬實現路由跳轉時重定向（類似未登錄，跳轉登錄界面的效果）

實現思路

使用useLocation獲取到指定的目標路由（未登錄不能訪問），然后重定向到其他頁面

import { useEffect } from "react";
import { Link ,Outlet, useLocation,useNavigate} from "react-router-dom"function App() {const location = useLocation();const navigate = useNavigate();useEffect(()=>{console.log(location)if(location.pathname == '/my'){// 如果當前頁面時個人頁// 重定向到首頁console.log('重定向到首頁')navigate('/');}},[location.pathname])return (<><nav><Link to='/'>home </Link><Link to='/about'>about </Link><Link to='/my'>my </Link></nav><Outlet></Outlet></>)
}export default App

這樣就成功攔截了這個跳轉，并重定向到了首頁