在react中使用ts和router利用路由懒加载加载组件请给出代码片段

在React中使用TypeScript和React Router，并利用路由懒加载加载组件的代码片段如下：

首先，安装相关依赖：

npm install react-router-dom
npm install @types/react-router-dom

然后，创建一个路由组件文件 App.tsx：

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

// 懒加载组件
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const NotFound = lazy(() => import('./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 函数来懒加载组件。在 Suspense 组件中，我们添加了一个 fallback 属性，用于在组件加载过程中显示一个加载中的提示。

接下来，创建三个组件文件 Home.tsx、About.tsx 和 NotFound.tsx：

Home.tsx：

import React from 'react';

const Home: React.FC = () => {
  return <div>Home</div>;
};

export default Home;

About.tsx：

import React from 'react';

const About: React.FC = () => {
  return <div>About</div>;
};

export default About;

NotFound.tsx：

import React from 'react';

const NotFound: React.FC = () => {
  return <div>404 Not Found</div>;
};

export default NotFound;

最后，将 App.tsx 渲染到根组件中：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

这样，当用户访问不同的路由时，对应的组件将会被懒加载并渲染到页面中