react v6路由拦截

本文展示路由的配置以及路由拦截的实现方法。

版本：

"react": "^17.0.2",
"react-router-dom": "6.0.2",

代码：

/App.js

import React from 'react'
import RootRoutes from '@router'
import { BrowserRouter } from 'react-router-dom'

function App () {
  return (
    <BrowserRouter>
      <RootRoutes/>
    </BrowserRouter>
  )
}

export default App

/router/index.jsx

import React from 'react'
import { useRoutes } from 'react-router-dom'
import { resolveRoute } from './utils'
import { routes } from './routes'
const RootRoutes = () => {
  return useRoutes(resolveRoute(routes))
}
function Index () {
  return (
    <RootRoutes />
  )
}
export default Index

/router/routes.jsx(路由表的配置，此处仅仅举个简单的例子)

export const routes = [   
{
	path: '/',
	name: 'home',
	element: <Home />
},
{
  path: '/login',
  element: () => {
    const Login = lazy(() => import('@views/login'))
    return (
      <LoginRedirect>
        <Login />
      </LoginRedirect>
    )
  }
},
{
  path: '/404',
  element: lazy(() => import('@views/error/not-found'))
},
{
  path: '*',
  element: () => <Navigate to='/404' replace />
}
]

utils.js(此文件的 BeforeEach方法 配置了react的路由拦截)

import React, { useEffect } from 'react'
import { useScopeCache } from 'use-scope-cache'
import { Skeleton } from 'antd'
import { useNavigate } from 'react-router-dom'
const cache = useScopeCache({ namespace: 'SAST' })
export function Suspense ({ children, route }) {
  return (
    <React.Suspense
      fallback={
        <div className="view-content">
          <Skeleton active />
        </div>
      }
    >
      <BeforeEach route={route}>
        { children }
      </BeforeEach>
    </React.Suspense>
  )
}

export function resolveRoute (routes) {
  return routes.map(routeItem => {
    const route = { ...routeItem }
    if (route.children) {
      route.children = resolveRoute(route.children)
    }
    if (route.element) {
      route.element = (
        <Suspense route={routeItem}>
          <route.element />
        </Suspense>
      )
    }
    return route
  })
}

// 路由拦截
function BeforeEach ({ children, route }) {
  const navigate = useNavigate()
 /*
 在渲染过程中执行导航操作会导致渲染死循环，
 因此要在组件加载完成（渲染完成）后执行，可以用useEffect来实现
 */
  useEffect(() => {
    if (!cache.get('token')) { // 未登录则跳转登录页面
      // 看是否登录
      navigate('/login')
    }
  }, [])
  return children
}