如何使React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等?

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

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

路由组件 – ExRouter.tsx<ExRouter routes={routes}></ExRouter>扩展路由配置,支持重定向,以及方便扩展其他属性。

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

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

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

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » 如何使React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等?

发表回复