使用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'));

const App = lazy(() => import('./views/App'));
const Login = lazy(() => import('./views/Login'));
const Register = lazy(() => import('./views/Register'));
const NotFound = lazy(() => import('./views/NotFound'));

root.render(
  <BrowserRouter>
    <Routes>
        <Route path="/" element={<App />}>
			{/* 放需要访问控制的子路由 */}
        </Route>
        <Route path="/login" element={
          <Suspense fallback={<Spinner animation="border" variant="primary" />}>
            <Login />
          </Suspense>
        } />
        <Route path="/register" element={
          <Suspense fallback={<Spinner animation="border" variant="primary" />}>
            <Register />
          </Suspense>
        } />
        <Route path="*" element={
          <Suspense fallback={<Spinner animation="border" variant="primary" />}>
            <NotFound />
          </Suspense>
        } />
    </Routes>
  </BrowserRouter>
);

// App.jsx
import store from '../store'
import {Outlet, Navigate} from 'react-router-dom';
import { Suspense } from 'react';
import {Spinner} from 'react-bootstrap'
export default function App(){
    return(
        store.getState().isLogined ? (
            <Suspense fallback={<Spinner animation="border" variant="primary" />}>
                <Outlet/>
            </Suspense>
        ) : <Navigate to="/login"/>
    )
}

3. 最后

当然，这只是一个简单的设计思想和设计实践，同志们可以根据自己的业务需求自行扩展增强