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

  • 希望达到跟 vue 一样,在 js 配置中则完成路由重定向的等基础操作,不太习惯使用 Routes、Route 等互相包裹的方式。

  • 所有基于 react-router-dom@6.15.0 封装了一个路由组件,并附带展示个路由守卫组件。

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

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

    js 复制代码
    // 基于 react-router-dom@6.15.0 封装
    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
相关推荐
Rattenking1 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
熊的猫2 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
小牛itbull6 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet18 小时前
那总结下来,react就是落后了
前端·react.js
王解21 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语2 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情2 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0012 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解2 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull2 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress