路由守卫

刀刀

1/2/2025

0 字

0 分钟

思路分析

二级路由渲染是通过 outlet 占位组件实现占位渲染，因此可以通过如下步骤实现路由守卫：

1. 设置一个函数，返回 outlet 。该函数代替原来的 outlet 做占位组件
2. 在函数中添加判断，如果判断通过，则放行；如果判断不通过，则跳转到对应的 JSX 页面
3. 注意，这里不能直接使用 useNavigate 来实现跳转，因为需要该函数是一个正常的 JSX 组件

简易架构

import { useEffect } from 'react'
import { useRoutes, useLocation, useNavigate } from 'react-router-dom'
import router from './router'

function BeforeRouterEnter() {
  const outlet = useRoutes(router)
  
  return outlet
}

export default function App() {
  // ...
  <BeforeRouterEnter />
}

业务实现

添加自己的判断，如果满足条件需要跳转路由，则通过 useNavigate 实现跳转。由于函数需要用作真实 JSX 组件，因此需要返回一个 DOM 元素。代码如下所示：

import { useEffect } from 'react'
import { useRoutes, useLocation, useNavigate } from 'react-router-dom'
import router from './router'
import { message } from 'antd'

function BeforeRouterEnter() {
  const outlet = useRoutes(router)
  const navigateTo = useNavigate()
  
  // 如果满足某种判断，则跳转到 vue 页面
  if(xxxx) {
     // 在组件加载完毕之后
     useEffect(() => {
    	 navigateTo('/vue')
  	 }, [])
     message.warning(`因为${xxxx}，你要跳转到vue页面`)
     return <div></div>
   }
  
  return outlet
}

export default function App() {
  // ...
  <BeforeRouterEnter />
}