在react中使用ts和router利用路由懒加载加载组件app中只有一个路由出口请给出代码片段

下面是一个使用React、TypeScript和React Router的示例代码：

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

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
const NotFound = lazy(() => import('./components/NotFound'));

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

export default App;

在上面的代码中，我们使用lazy函数来实现路由组件的懒加载。import('./components/Home')中的路径是相对于当前文件的路径，你需要根据你的项目结构进行调整。

Suspense组件用于在加载路由组件时显示一个加载中的状态。你可以在fallback属性中传入一个加载中的元素，例如<div>Loading...</div>。

Switch组件用于确保只有一个路由组件被渲染。在这个例子中，我们先匹配exact path="/" component={Home}路由，然后是path="/about" component={About}路由，最后是component={NotFound}路由，它将会匹配任何其他路径。

注意，上述代码中使用的BrowserRouter组件是React Router的一种路由模式。你也可以根据需要使用其他的路由模式，例如HashRouter或MemoryRouter。

希望这个代码片段能够帮助到你