React 像 vue 一样配置页面路由，并支持重定向路由，路由守卫等（使用 useRoutes 完成）

希望达到跟 vue 一样，在 js 配置中则完成路由重定向的等基础操作，不太习惯使用 Routes、Route 等互相包裹的方式。
所有基于 [email protected] 封装了一个路由组件，并附带展示个路由守卫组件。

路由组件 - ExRouter.tsx：<ExRouter routes={routes}></ExRouter>

扩展路由配置，支持重定向，以及方便扩展其他属性。

js 复制代码

// 基于 [email protected] 封装
import { useRoutes, Navigate, IndexRouteObject, NonIndexRouteObject } from 'react-router-dom'
import { useLocation } from 'react-router'

/**
 * @description: 扩展 IndexRouteObject
 */
interface exIndexRouteObject extends IndexRouteObject {
  /**
   * @description: 重定向路由地址
   */
  redirect?: string
}

/**
 * @description: 扩展 NonIndexRouteObject
 */
interface exNonIndexRouteObject extends NonIndexRouteObject {
  /**
   * @description: 重定向路由地址
   */
  redirect?: string
}

/**
 * @description: 路由对象类型
 */
export type exRouteObject = exIndexRouteObject | exNonIndexRouteObject;

/**
 * @description: 组件参数
 */
type props = {
  /**
   * @description: 路由列表
   */
  routes: exRouteObject[],
  /**
   * @description: 子组件列表
   */
  children?: any
}

const Component = (props: props) => {
  // 当前导航对象
  const location = useLocation()
  // 找到路由对象
  const findRoute = (routes: exRouteObject[], location:any): any => {
    // 当前层级检查一轮
    let route: any = routes.find((item: any) => item.path === location.pathname)
    // 没有则搜索当前层级同级子页面
    if (!route) {
      // 排查，找到停止
      routes.some((item: any) => {
        // 取出子列表
        const children: exRouteObject[] = item?.children || []
        // 进行排查
        route = findRoute(children, location) 
        // 有值则暂停
        return !!route
      })
    }
    // 返回
    return route
  }
  // 找到当前路由
  const route: any = findRoute(props.routes, location)
  // 返回渲染
  return (
    <>
      {/* 加载所有路由 */}
      { useRoutes(props.routes) }
      {/* 检查当前路由是否需要重定向 */}
      { route?.redirect && <Navigate to={route.redirect} replace /> }
    </>
  )
}

export default Component

路由拦截（路由守卫）组件：<BeforeEach></BeforeEach>

js 复制代码

// import { Navigate, useLocation, useSearchParams } from 'react-router-dom'

const Component = (props: any) => {
  // // 接收路由参数
  // const [searchParams] = useSearchParams()
  // // 当前导航对象
  // const location = useLocation()
  // // token (检查本地或路由参数)
  // const token = 'xxxx'
  // // console.log(location, searchParams.get('token'))
  // // 路由权限校验
  // if (location.pathname.includes('/login') && token) {
  //   // 跳转登录页 && token有值
  //   return <Navigate to="/home" replace />
  // } else if (!location.pathname.includes('/login') && !token) {
  //   // 不是跳转登录页 && token无值
  //   return <Navigate to="/login" replace />
  // }
  // 验证通过
  return props.children
}

export default Component

上面两个组件在路由中的使用：

js 复制代码

import React from 'react'
import { Navigate } from 'react-router-dom'
import BeforeEach from './BeforeEach'
import ExRouter from './ExRouter'

// 懒加载
const lazyload = (path: string) => {
  // 加载组件
  let Component=React.lazy(()=>{return import (`@/${path}`)})
  // 返回渲染
  return (
    <React.Suspense fallback={<>请等待·····</>}>
      <Component />
    </React.Suspense>
  )
}

// 基础路由
const baseRoutes: Record<string, any>[] = [
  {
    path: '/home',
    element: lazyload('views/home'),
  },
  {
    path: '/user',
    element: lazyload('views/user'),
  },
  {
    path: '/layout',
    redirect: '/layout/home',
    element: lazyload('layouts/BaseLayout'),
    children: [
      {
        path: '/layout/home',
        redirect: '/layout/home/home1',
        element: lazyload('views/home'),
        children: [
          {
            path: '/layout/home/home1',
            element: lazyload('views/home')
          }
        ]
      }
    ]
  }
]

// 路由列表
const routes: Record<string, any>[] = [
  ...baseRoutes,
  {
    path: "/404",
    element: (<>页面地址不存在</>),
  },
  { path: "/", element: <Navigate to="/home" /> },
  { path: "*", element: <Navigate to="/404" /> },
]

// 加载配置式路由
function Router () {
  return (
    <BeforeEach>
      {/* 加载所有路由 */}
      {/* { useRoutes(props.routes) } */}
      {/* 加载所有路由，并扩展路由配置 */}
      <ExRouter routes={routes}></ExRouter>
    </BeforeEach>
  )
}

// 导出
export default Router