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

这样就成功拦截了这个跳转，并重定向到了首页

原文地址：https://blog.csdn.net/I_am_shy/article/details/140370051

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！