// 傳統(tǒng)手動引入方式
import HomeRoute from './router/modules/home'
import UserRoute from './router/modules/user'
import OrderRoute from './router/modules/order'

const routes: RouteObject[] = [...HomeRoute, ...UserRoute, ...OrderRoute]

import type { RouteObject } from 'react-router-dom'

export const getAllRouteLists = async (
  exportType: 'default' | 'named' = 'default'
): Promise<RouteObject[]> => {
  const allRouteLists: (RouteObject & { rank?: number })[] = []

  try {
    const routeModules = import.meta.glob('../router/modules/**/*.{ts,tsx}', { eager: true })

    Object.values(routeModules).forEach((module: any) => {
      if (exportType === 'default') {
        if (module.default && Array.isArray(module.default)) {
          allRouteLists.push(...module.default)
        }
      } else if (exportType === 'named') {
        const routeListKeys = Object.keys(module).filter(key => key.endsWith('RouteList'))
        routeListKeys.forEach(key => {
          if (Array.isArray(module[key])) {
            allRouteLists.push(...module[key])
          }
        })
      }
    })

    allRouteLists.sort((a, b) => {
      const rankA = a.rank ?? Infinity
      const rankB = b.rank ?? Infinity

      return rankA - rankB
    })
  } catch (error) {
    console.error('批量導入路由失敗：', error)
  }

  return allRouteLists as RouteObject[]
}

import type { RouteObject } from 'react-router-dom'

export const getAllRouteLists = async (
  exportType: 'default' | 'named' = 'default'
): Promise<RouteObject[]> => {
  const allRouteLists: (RouteObject & { rank?: number })[] = [] 
  // ...
}

const routeModules = import.meta.glob('../router/modules/**/*.{ts,tsx}', { eager: true })

Object.values(routeModules).forEach((module: any) => {
  if (exportType === 'default') {
    // 處理默認導出（如：export default [{ path: '/home', element: <Home /> }]）
    if (module.default && Array.isArray(module.default)) {
      allRouteLists.push(...module.default)
    }
  } else if (exportType === 'named') {
    // 處理命名導出（如：export const HomeRouteList = [{ path: '/home', element: <Home /> }]）
    const routeListKeys = Object.keys(module).filter(key => key.endsWith('RouteList'))
    routeListKeys.forEach(key => {
      if (Array.isArray(module[key])) {
        allRouteLists.push(...module[key])
      }
    })
  }
})

allRouteLists.sort((a, b) => {
  const rankA = a.rank ?? Infinity
  const rankB = b.rank ?? Infinity
  return rankA - rankB
})

try {
  // 動態(tài)導入、路由提取、排序邏輯
} catch (error) {
  console.error('批量導入路由失?。?, error)
}

return allRouteLists as RouteObject[]

import type { RouteObject } from 'react-router-dom'
import Home from '../../pages/Home'

// 定義 rank: 1（優(yōu)先級高，排在前面）
const HomeRoutes: (RouteObject & { rank?: number })[] = [
  {
    path: '/',
    element: <Home />,
    rank: 1 // 首頁優(yōu)先級最高
  }
]

export default HomeRoutes

import type { RouteObject } from 'react-router-dom'
import User from '../../pages/User'

export const UserRouteList: (RouteObject & { rank?: number })[] = [
  {
    path: '/user',
    element: <User />,
    rank: 2 // 優(yōu)先級低于首頁
  }
]

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { getAllRouteLists } from '../utils/routeHelper'

// 由于 getAllRouteLists 是異步函數(shù)，需用 React 18 的 Suspense 包裹
import { Suspense, lazy } from 'react'

// 異步創(chuàng)建路由
const createRouter = async () => {
  // 1. 調(diào)用工具函數(shù)：默認導出類型（可省略 exportType 參數(shù)）
  const routes = await getAllRouteLists()
  
  // 2. 若需獲取命名導出的路由，需指定 exportType: 'named'
  // const namedRoutes = await getAllRouteLists('named')
  
  // 3. 合并路由（若同時有默認導出和命名導出）
  // const allRoutes = [...routes, ...namedRoutes]

  // 創(chuàng)建路由實例
  return createBrowserRouter(routes)
}

// 懶加載路由創(chuàng)建函數(shù)
const LazyRouter = lazy(() => 
  createRouter().then(router => ({ default: () => <RouterProvider router={router} /> }))
)

// 導出路由組件，用 Suspense 處理加載狀態(tài)
export default function AppRouter() {
  return (
    <Suspense fallback={<div>Loading routes...</div>}>
      <LazyRouter />
    </Suspense>
  )
}

import React from 'react'
import ReactDOM from 'react-dom/client'
import AppRouter from './router'

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

// 排除文件名包含 test 的文件
const routeModules = import.meta.glob('../router/modules/**/!(*test*).{ts,tsx}', { eager: true })

src/router/modules/
├── public/       # 公共路由（首頁、關于我們）
│   ├── home.ts
│   └── about.ts
└── user/         # 用戶路由（個人中心、設置）
    ├── profile.ts
    └── setting.ts

// src/router/modules/home.ts
import { lazy } from 'react'
import type { RouteObject } from 'react-router-dom'

// 懶加載 Home 組件
const Home = lazy(() => import('../../pages/Home'))

const HomeRoutes = [
  {
    path: '/',
    element: <Home />,
    rank: 1
  }
]

export default HomeRoutes