已解决：反应路由器延迟加载

与 React Router 延迟加载相关的主要问题是，如果实施不当，可能会导致性能问题。 延迟加载会增加初始页面加载时间，因为每个组件的代码都需要单独加载。 此外，如果一个组件不经常使用，它可能根本就不会被加载，从而导致资源浪费。 最后，与不支持延迟加载的旧浏览器存在潜在的兼容性问题。

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

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
 
function App() { 

  return ( 

    <Router> 

      <Suspense fallback={<div>Loading...</div>}>

        <Switch>  

          <Route exact path="/" component={Home} />  

          <Route path="/about" component={About} />  

          <Route path="/contact" component={Contact} />  

        </Switch>  

      </Suspense> 

    </Router>  ); } export default App;

1. import React, { Suspense } from 'react';
// 这一行从 React 库中导入 React 库和 Suspense 组件。

2. import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// 此行从 react-router-dom 库中导入 BrowserRouter、Route 和 Switch 组件。

3. const Home = React.lazy(() => import('./Home'));
// 这一行创建了一个名为 Home 的常量，它使用 React 的延迟加载特性从与该文件（App 组件）相同目录下的文件中动态导入一个名为 Home 的组件。

4. const About = React.lazy(() => import('./About'));
// 这一行创建了一个名为 About 的常量，它使用延迟加载从与该文件（App 组件）位于同一目录的文件中动态导入一个名为 About 的组件。
const Contact = React.lazy(() => import('./Contact')); // 此行创建了一个名为 Contact 的常量，它使用延迟加载从与该文件（App 组件）位于同一目录的文件中动态导入名为 Contact 的组件。

5.函数应用程序（）{返回（ // 这是一个箭头函数，它返回包裹在之前导入的 Router 标签中的 JSX 代码

6.载入中...