react-access-router

import React, { ReactElement } from 'react'
import ReactDOM from 'react-dom/client'
import Router, { RouterProps } from 'react-access-router'
import { Navigate } from 'react-router-dom'
import routes from './routes'

import Error from '@/views/home/error'

const MODE: 'history' | 'hash' = 'history'

export default function BaseRouter(): ReactElement {
  const useSuspense = { fallback: <>Loading</> }
  const routeProps: RouterProps = {
    // default role
    defaultRole: [2, 3],
    // component use lazy, must add Suspense,
    routes: routes,
    // use Suspense
    useSuspense,
    // use History or Hash
    mode: MODE,
    // if router need check auth, this is callback, return React dom
    onAuthority(route) {
    	// will redirect to 404
      return <Navigate to="/404" />
    },
    // useErrorBoundary is undefined will not use ErrorBoundary
    useErrorBoundary: {
      onDidCatch: (error, errorInfo) => {
        console.log(error, errorInfo)
      },
      // if null, will use default
      element: Error,
    },
  }

  return <Router {...routeProps} />
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Router />,
  </React.StrictMode>,
)

routes结构同react-router-dom@6.3.0

import { lazy } from 'react'
import Layout from '@/components/Layout'
import _404 from '@/views/home/404'
import type { Props } from 'react-access-router'

const Home = lazy(() => import('@/views/home'))
const A = lazy(() => import('@/views/home/a'))
const B = lazy(() => import('@/views/home/b'))

/*
	type Props = {
	  index?: boolean
    // route path
    path?: string
    // document title
    title?: string
    // use bar info
    meta?: Record<string, any>
    // token access, 设置会触发onAuthority
    authority?: boolean
    // 仅在对应权限展示
    role?: string | number | (string | number)[]
    children?: Props[]
  	element: ComponentOpt
	}
*/

export const routes: Props[] = [
  {
    path: '/',
    element: Layout,
    authority: true,
    title: '首页',
    children: [
      {
        index: true,
        title: 'sssss',
        element: Home,
      },
      {
        path: '/a',
        title: 'a',
        role: 1,
        element: A,
      },
      {
        authority: true,
        path: '/b/:id',
        title: 'b',
        element: B,
      },
    ],
  },
  {
    path: '*',
    element: _404,
  },
]

export default routes

import { ErrorBoundary, matchRoute, useRouter, useAwait } from 'react-access-router'

ErrorBoundary: // 默认错误边界组件；

// 匹配路由
matchRoute：(path, _pattern) => boolean
matchRoute('/a/1', '/a/:id') // true

// useRouter hook
const { setRole, getRoutes } = useRouter

setRole: (role) => void // 设置权限
getRoutes: () => Props[] // 返回当前所有路由信息


// outside Component
const delay = (id: number) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(id)
    }, 3000)
  })
}

function Demo() {
  // 等待promise结束
  const resouce = useAwait(delay)
  return <>{ resouce.read(222) }</>
}

后台展示权限使用：

const routes: Props[] = [
  {
    path: PATH.DEFAULT,
    element: Layout,
    role: 1,
    children: [
      {
        index: true,
        element: Home,
      },
    ],
  },
  {
    path: '/income',
    element: Layout,
    title: '财务收入',
    children: [
      {
        index: true,
        role: 2,
        element: InCome,
      },
      {
        path: '/income/top',
        title: '收入top榜单',
        element: InComeTopRank,
      },
    ],
  },
  {
    path: '/setting',
    element: Layout,
    role: 3,
    children: [
      {
        path: '/setting/user',
        title: '员工列表',
        element: SettingUser,
      },
      {
        path: '/setting/log',
        title: '日志列表',
        element: SettingLog,
      },
    ],
  },
  {
    path: '*',
    element: _404,
  },
]

import { useRouter } from 'react-access-router'
const { getRoutes, setRole } = useRouter()

useEffect(() => {
  setRole([2, 3])
}, [])

console.log(getRoutes())

// Log: ------getRoutes()--------
[
  {
    path: '/income',
    element: Layout,
    title: '财务收入',
    children: [
      {
        index: true,
        role: 2,
        element: InCome,
      },
      {
        path: '/income/top',
        title: '收入top榜单',
        element: InComeTopRank,
      },
    ],
  },
  {
    path: '/setting',
    element: Layout,
    role: 3,
    children: [
      {
        path: '/setting/user',
        title: '员工列表',
        element: SettingUser,
      },
      {
        path: '/setting/log',
        title: '日志列表',
        element: SettingLog,
      },
    ],
  },
  {
    path: '*',
    element: _404,
  },
]

版本优化上层路由authority拦截，路由渲染问题。