【react】在 React Router v6 中使用路由懒加载

【react】在 React Router v6 中使用路由懒加载

// src/App.js
import React, { Suspense, lazy } from 'react';
import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';

const loadable = (Component, props={}) => (
  <Suspense fallback={<div>Loading...</div>}>
    <Component {...props} />
  </Suspense>
);

const router = createBrowserRouter([
  {
    path: '/',
    element: loadable(lazy(() => import('./pages/Home'))),
  },
  {
    path: 'about',
    element: loadable(lazy(() => import('./pages/About'))),
  },
  {
    path: 'contact',
    element: loadable(lazy(() => import('./pages/Contact'))),
  },
]);

const App = () => {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <RouterProvider router={router} />
    </div>
  );
};

export default App;