useRoutes与React.lazy的使用

注意react-router-dom的版本6.3.0 和reac版本18.0.0
routeConfig.js

import React from 'react';
const Dashboard = React.lazy(() => import('../components/Dashboard'));
const DashboardMessages = React.lazy(() => import('../components/DashboardMessages'));
const DashboardTasks = React.lazy(() => import('../components/DashboardTasks'));
const AboutPage = React.lazy(() => import('../components/AboutPage'));


  let  routeConfig = [
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
          path: "messages",
          element: <DashboardMessages />,
        },
        { path: "tasks", element: <DashboardTasks /> },
      ],
    },
    { path: "team", element: <AboutPage /> },
  ];


export default RrouteConfig

App.js

import routeConfig from './routeConfig.js'
import { Spin } from 'antd';
import React from 'react';
import {
  useRoutes
} from 'react-router-dom';
const Routes = () => {
  const elements = useRoutes(routeConfig);

  return elements;
}
const App =  () => {
  return (
    <div>
      <React.Suspense  fallback={<Spin />}>
      <Components />
    </React.Suspense>
    </div>
  );
};
export default App;

参考
https://reactrouter.com/docs/en/v6/hooks/use-routes
https://stackoverflow.com/questions/65880299/lazy-loading-with-react-router-v6-beta