router-naive-guard v0.1.0

依赖

1. react 版本 > 17
2. react-router-dom v6版本可用

使用方法

1. useGuardedRoutes创建

import { Navigate } from 'react-router-dom'
import Layout from '../pages/Layout'
import { lazy, Suspense } from 'react'
import GuardedRoute, { useGuardedRoutes, IGuardedRoute } from './GuardedRoute'

export enum RoutePath {
  A = '/a',
  B = '/b',
  C = '/c'
}

const lazyElement = (routePath: string) => {
  const Component = lazy(() => import(routePath))
  return (
    <Suspense fallback={<div> 加载中... </div>}>
      <Component />
    </Suspense>
  )
}

export const routes: IGuardedRoute[] = [
  {
    path: '/',
    element: <Navigate to={RoutePath.A} replace={true} />,
    isGuarded: false
  },
  {
    element: <Layout />,
    isGuarded: false,
    children: [
      {
        path: RoutePath.A,
        element: lazyElement('../pages/A'),
        guard: () => true,
        isGuarded: true
      },
      {
        path: RoutePath.B,
        element: lazyElement('../pages/B'),
        guard: () => true,
        isGuarded: true
      },
      {
        path: RoutePath.C,
        element: lazyElement('../pages/C'),
        guard: () => false,
        redirect: '/b',
        isGuarded: true
      }
    ]
  },
  {
    path: '*',
    element: lazyElement('../pages/Error'),
    isGuarded: false
  }
]

export default function Routes() {
  return useGuardedRoutes(routes)
}

2. GuardedRoute创建

import { Navigate, useRoutes } from 'react-router-dom'
import Layout from '../pages/Layout'
import { lazy, Suspense } from 'react'
import GuardedRoute, { useGuardedRoutes, IGuardedRoute } from './GuardedRoute'

export enum RoutePath {
  A = '/a',
  B = '/b',
  C = '/c'
}

const lazyElement = (routePath: string, ...rest) => {
  const Component = lazy(() => import(routePath))
  return (
    <GuardedRoute 
    guard={rest.guard} 
    redirect={rest.redirect} 
    replace={rest.replace} 
    state={rest.replace}>
      <Suspense fallback={<div> 加载中... </div>}>
        <Component />
      </Suspense>
    </GuardedRoute>
  )
}

export const routes: IGuardedRoute[] = [
  {
    path: '/',
    element: <Navigate to={RoutePath.A} replace={true} />
  },
  {
    element: <Layout />,
    children: [
      {
        path: RoutePath.A,
        element: lazyElement('../pages/A')
      },
      {
        path: RoutePath.B,
        element: lazyElement('../pages/B')
      },
      {
        path: RoutePath.C,
        element: lazyElement('../pages/C')
      }
    ]
  },
  {
    path: '*',
    element: lazyElement('../pages/Error'),
  }
]

export default function Routes() {
  return useRoutes(routes)
}

具体参数