React使用lazy懒加载

import { HashRouter, Route, Routes } from "react-router-dom";
import React, { lazy, Suspense } from "react";
import "./App.css";
// 使用懒加载运行组件
const Login = lazy(() => import("./views/login/LoginPage.jsx"));
const Layout = lazy(() => import("./views/layout/LayoutPage.jsx"));
const Hot = lazy(() => import("./views/hot/HotMovie.jsx"));
const Cinema = lazy(() => import("./views/cinema/CinemaPage.jsx"));
const Mine = lazy(() => import("./views/mine/MinePage.jsx"));
const City = lazy(() => import("./views/city/CityPage.jsx"));

function App() {
  return (
    <HashRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/login" element={<Login />} />
          <Route path="/layout" element={<Layout />}>
            <Route path="hot" element={<Hot />} />
            <Route path="cinema" element={<Cinema />} />
            <Route path="mine" element={<Mine />} />
          </Route>
          <Route path="/city" element={<City />} />
        </Routes>
      </Suspense>
    </HashRouter>
  );
}

export default App;