一个插件轻松搞定 React 路由页面预加载！

import { Suspense, useState } from"react";
import { BrowserRouter, Routes, Route, Link } from"react-router-dom";
import lazyWithPreload from"react-lazy-with-preload";

// 懒加载 About 组件
const About = lazyWithPreload(() =>import("./About"));

// Home 页面组件
function Home() {
const [isPreloading, setIsPreloading] = useState(false);

const handleMouseEnter = () => {
    About.preload();
    setIsPreloading(true);
  };

const handleMouseLeave = () => {
    setIsPreloading(false);
  };

return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about">
        <button onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
          Go to About
        </button>
      </Link>
      {isPreloading && <div>Preloading...</div>}
    </div>
  );
}

// 应用入口
function App() {
return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/about"
          element={
            <Suspense fallback={<div>Loading...</div>}>
              <About />
            </Suspense>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

exportdefault App;