已解決：反應路由器延遲加載

與 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.載入中...