使用react-router-dom v6实现路由守卫

使用react-router-dom v6实现路由守卫

众所周知，在react-router中没有像vue-router中提供的路由守卫钩子函数，所以要想实现路由守卫，把非法访问拦截下来，全得靠自己。这里提供一个简单易懂的设计思路和设计实践，希望可以帮助到有相关需求的人，而不是像我一样闷头查资料看文档搞半天。

1. 设计思路

react-router-dom提供了Outlet组件来支持子路由的组件渲染，提供了Navigate组件来重定向，那么就可以利用这两样东西来实现路由守卫，思路简单，实现起来更简单

2. 上代码

我们使用App组件来做鉴权，所有需要控制访问的组件都可以作为子路由放在App下，由App负责决定是显示还是拦截重定向。其他不需要控制的路由放在外面即可，最后放个*路由用来匹配NotFound页面。

// index.js
import React, {
    lazy, Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {
   Spinner} from 'react-bootstrap'
import {
   
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";


const root = ReactDOM.createRoot(document.getElementById('root'));