在TypeScript中使用React.lazy

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// 使用 React.lazy 动态导入组件
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

const App: React.FC = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
};

export default App;

const Home = React.lazy(() => import('./Home').then((module) => ({ default: module.Home })));
const About = React.lazy(() => import('./About').then((module) => ({ default: module.About })));

<Suspense fallback={<div>Loading...</div>}>
  <Route path="/about" component={About} />
</Suspense>