React-router-dom v6.0.2 中的延迟加载

Question

如何使用这种语法创建延迟加载？

const A = React.lazy(() => import("./A"));
const B = React.lazy(() => import("./B"));

function App() {
return (<Routes>
    <Route
        path="firstPath"
        element={<A />} />
    
    <Route
        path="secondPath"
        element={<B />} />

</Routes>)
}

我在想，使用这种语法，当我们将 A 和 B 传递给元素 props 时，它们将被调用，并且延迟加载是不可能的。

Answer 1

您可以将所有内容包装在一个 Suspense 中：

const Home = lazy(() => import('./home'));
const About = lazy(() => import('./about'));

function App() {
  return (
    <Router>
      <Suspense fallback={<p> Loading...</p>}>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/about' element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}