路由 Router

---

🧩 使用示例

1. 📚 配置路由

import React from 'react';

import { AboutCloudAIPage, HomeIndex } from './routerConfig';

function OptionRouters() {
  return [
    {
      id: 'app',
      path: '/',
      label: '入口',
      element: <HomeIndex />,
      children: [
        {
          id: 'AboutAI',
          path: '/about',
          label: '关于',
          element: <AboutCloudAIPage />,
        },
      ],
    },
  ];
}

export default OptionRouters();

📚 2. App.jsx 内引入

import React from 'react';

import Routers from '@/router';

function AppIndex() {
  return <Routers />;
}

export default AppIndex;

✨ 设计思路

当前路由是根据多页应用设计，所以 src/router 内分为多个目录

src/router/base 目录内有两个文件。

• 1. routerConfig.jsx：引入并导出需要路由的组件（懒加载）。
• 2. router.jsx：配置可递归的路由结构。

---

✨ 嵌套路由使用

父路由组件内 <HomeIndex /> 添加如下中间件，这样子路由(AboutCloudAIPage)就能找到自己所属的父路由(HomeIndex)。

<Outlet />

如需实现多页应用 请自行配置 webpack.config.js 和 router