react-router实现路由拦截，useLocation，useNavigate钩子

路由拦截

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