React 路由懒加载：使用 TypeScript 和 React Router 加载组件 - 代码示例

在 React 中使用 TypeScript 和 React Router，并利用路由懒加载加载组件的代码片段如下：\n\n首先，安装相关依赖：\n\nshell\nnpm install react-router-dom\nnpm install @types/react-router-dom\n\n\n然后，创建一个路由组件文件 App.tsx：\n\ntsx\nimport React, { lazy, Suspense } from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\n// 懒加载组件\nconst Home = lazy(() => import('./Home'));\nconst About = lazy(() => import('./About'));\nconst NotFound = lazy(() => import('./NotFound'));\n\nconst App: React.FC = () => {\n return (\n <Router>\n <Suspense fallback={<div>Loading...</div>}>\n <Switch>\n <Route exact path="/" component={Home} />\n <Route path="/about" component={About} />\n <Route component={NotFound} />\n </Switch>\n </Suspense>\n </Router>\n );\n};\n\nexport default App;\n\n\n在上面的代码中，我们使用了 lazy 函数来懒加载组件。在 Suspense 组件中，我们添加了一个 fallback 属性，用于在组件加载过程中显示一个加载中的提示。\n\n接下来，创建三个组件文件 Home.tsx、About.tsx 和 NotFound.tsx：\n\nHome.tsx：\n\ntsx\nimport React from 'react';\n\nconst Home: React.FC = () => {\n return <div>Home</div>;\n};\n\nexport default Home;\n\n\nAbout.tsx：\n\ntsx\nimport React from 'react';\n\nconst About: React.FC = () => {\n return <div>About</div>;\n};\n\nexport default About;\n\n\nNotFound.tsx：\n\ntsx\nimport React from 'react';\n\nconst NotFound: React.FC = () => {\n return <div>404 Not Found</div>;\n};\n\nexport default NotFound;\n\n\n最后，将 App.tsx 渲染到根组件中：\n\ntsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(<App />, document.getElementById('root'));\n\n\n这样，当用户访问不同的路由时，对应的组件将会被懒加载并渲染到页面中。