React configures page routing like vue, and supports redirect routing, routing guards, etc. (completed using useRoutes)

• I hope to achieve the vuesame result as in . In jsthe configuration, basic operations such as route redirection are completed. I am not used to using Routes、Routeetc. to wrap each other.

• All are based on [email protected]encapsulating a routing component and displaying a routing guard component.

• Routing component- ExRouter.tsx:<ExRouter routes={routes}></ExRouter>

  Extend routing configuration, support redirection, and facilitate the expansion of other attributes.

  // 基于 [email protected] 封装
  import {
        
         useRoutes, Navigate, IndexRouteObject, NonIndexRouteObject } from 'react-router-dom'
  import {
        
         useLocation, Location } 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: 找到路由对象类型
   */
  export type findExRouteObject = exRouteObject | undefined
  
  /**
   * @description: 组件参数
   */
  type props = {
        
        
    /**
     * @description: 路由列表
     */
    routes: exRouteObject[],
    /**
     * @description: 子组件列表
     */
    children?: any
  }
  
  const Component = (props: props) => {
        
        
    // 当前导航对象
    const location = useLocation()
    // 找到路由对象
    const findRoute = (routes: exRouteObject[], location: Location): findExRouteObject => {
        
        
      // 当前层级检查一轮
      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: findExRouteObject = findRoute(props.routes, location)
    // 返回渲染
    return (
      <>
        {
        
        /* 加载所有路由 */}
        {
        
         useRoutes(props.routes) }
        {
        
        /* 检查当前路由是否需要重定向 */}
        {
        
         route?.redirect && <Navigate to={
        
        route.redirect} replace /> }
      </>
    )
  }
  
  export default Component
  

• Route interception (route guard) component:<BeforeEach></BeforeEach>

  // 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
  

• The use of the above two components in routing:

  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