React Router V6实现路由守卫

先上代码：

入口文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'
import AppRouter from './router/routeNav';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <AppRouter />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 AppRouter.js文件

import { Route,Routes, useLocation, Navigate } from 'react-router-dom'
import Login from '../page/login/login';
import Index from '../page/index/index';
import Register from '../page/register/register';
import ErrPage from '../page/ErrPage/errPage';
import MySpace from '../component/my_space/mySpace';
import H5Template from '../component/h5_template/h5Template';
import { ReactNode } from 'react';
const AppRouter = () => {
  const location = useLocation();
  const { pathname } = location;

  const routes = [
    {
      path: '/',
      auth: false,
      component: <Navigate to='/index' />,
    },
    {
      path: '/index',
      auth: false,
      component: <Index />,
      child: [
        {
          path: '/index/myspace',
          auth: true,
          component: <MySpace /> 
        },
        {
          path: '/index/h5template',
          auth: false,
          component: <H5Template /> 
        }
      ]
    },
    {
      path: '/login',
      auth: false,
      component: <Login /> 
    },
    {
      path: '/register',
      auth: false,
      component: <Register /> 
    },
    {
      path: '/errPage',
      auth: false,
      component: <ErrPage />
    },
    {
      path: '/*',
      auth: false,
      component: <Navigate to='/errPage' replace={true}></Navigate>
    }
  ] 

  const isLogin = false;

  //请求页面路径需要验证 && 没有登录 -> 跳转登录页 ， 后续考虑登录后是否自动跳转被拦截路径 
  const RouteNav = (param: any) => {
    return (
      param.map((item: {path: string,auth: boolean,component: ReactNode, child?: any}) => {
        return (
          <Route path={item.path} element={item.path === pathname && item.auth && !isLogin ? <Navigate to='/login' replace={true}></Navigate> : item.component} key={item.path}>
            {
              item?.child && RouteNav(item.child)
            }
          </Route>
        )
      })
    )
  }

  return (
    <Routes>
      {
        RouteNav(routes)
      }
    </Routes>
  )

}

export default AppRouter;

解释:AppRoute文件动态生成了路由,该文件最后会返回如下形式的代码给入口文件。

<Routes>
    <Route>
        <Route></Route>
        ....
    </Route>
    ...
</Routes>

函数RouteNav会根据routes递归生成路由表，利用useLoation可以拿到用户当前想要访问的页面路径。如果用户访问的路径是'/'则利用routes的第一条规则，让用户重定向至index页。如果用户访问的路径不存在与路右表里面，则由最后一条规则重定向至错误页。如果用户访问的页面需要登录，但是当前未登录，则在创建路由过程中，利用如下判断，重定向至登录页。

element={item.path === pathname && item.auth && !isLogin ? <Navigate to='/login' replace={true}></Navigate> : item.component}

这样一个简单的基于React Router V6的路由守卫就做好了