React使用lazy实现组件懒加载

React组件懒加载

import { HashRouter, Route, Routes } from "react-router-dom";
import React, { lazy, Suspense } from "react";
// 使用懒加载运行组件
const Login = lazy(() => import("./views/login/Login"));
const Index = lazy(() => import("./views/index/Index"));
const Layout = lazy(() => import("./views/index/Layout"));
const Mine = lazy(() => import("./views/mine/Mine"));
const Movie = lazy(() => import("./views/movie/Movie"));
const Map = lazy(() => import("./views/map/Map"));

function App() {
  return (
    // HashRouter为路由器,所以的路由必须放置在路由器中
    <HashRouter>
      <Suspense fallback={<div>Loading...</div>}>
        {/* Routes:线路匹配容器,所有组件切换都应该放置在Routes中 */}
        <Routes>
          {/* Route:匹配具体的组件 */}
          {/* exact是默认时的精准匹配,默认是包含匹配,只要hash包含了此path就会被拦截 */}
          {/* 登录页面 */}
          <Route path="/" exact element={<Login />}></Route>

          {/* 布局页面 */}
          <Route path="/layout" element={<Layout />}>
            {/* 热映 */}
            <Route exact path="/layout/index" element={<Index />}></Route>
            {/* 我的*/}
            <Route path="/layout/mine" element={<Mine />}></Route>
            {/* 影院*/}
            <Route path="/layout/movie" element={<Movie />}></Route>
          </Route>

          {/* 城市 */}
          <Route path="/map" exact element={<Map />}></Route>
        </Routes>
      </Suspense>
    </HashRouter>
  );
}

export default App;