React-router6实现全局路由守卫

在React里面,它不像Vue一样,为我们提供和很多方便的功能,一些功能都需要自己去进行封装比如说路由拦截,也需要自己进行封装。

1.创建路由

import { useRoutes, useLocation, Outlet } from "react-router-dom";
import { Navigate } from "react-router";
import {  Suspense, useState, useEffect } from "react";
 import Home from '../pages/home'
 import HomeOne from '../pages/homeone'
 import HomeTwo from '../pages/hometwo'
const Myrouters = [
  {
    path:'/',
    element:<Navigate to='/home'></Navigate>
  },
  {
    path:'/home',
    element:<Home></Home>
  },
  {
    path:'/homeone',
    element:<HomeOne></HomeOne>
  },
  {
    path:'/hometwo',
    element:<HomeTwo></HomeTwo>
  },
];

const Router = () => (
  <Suspense fallback={<div>loading</div>}>{useRoutes(Myrouters)}</Suspense>
);
export { Router };

可以看到我创建了三个路由，home,hometwo,homethree,接下来可以在app.jsx进行引入,然后将其已组件的形式使用。

如：<Router></Router>

2.全局守卫

在上面代码修改如下,向外多暴露了一个RouterBeforeEach,也需要在app.jsx引入。

const RouterBeforeEach = () => {
  const location = useLocation();
  const navigator =useNavigate()
  useEffect(() => {
    if(location.pathname=='/home'){
      navigator('/hometwo')
    }
  });
  return <Outlet />
};
export { Router, RouterBeforeEach };

RouterBeforeEach是一个用来监听路由变化的组件每一次路由变化都会触发useEffect函数,通过Outlet返回一个路由出口,不影响其它路由zujian,这个时候我们可以通过useLocation来获取路由的信息比如对home进行一个限制不让你进入。通过location.pathname获取跳转路由的名称，让其如果进入home跳转hometwo，代码如下

const RouterBeforeEach = () => {
  const location = useLocation();
  const navigator =useNavigate()
  useEffect(() => {
    if(location.pathname=='/home'){
      navigator('/hometwo')
    }
  });
  return <Outlet />
};