如何在React Router中为特定路由按需应用懒加载与Suspense？

你的代码无法运行是因为React Router v6的<Routes>组件仅允许<Route>作为直接子元素，不能直接将<Suspense>放在<Routes>内部作为同级子元素。以下是两种可行的正确实现方式：

方案一：为每个懒加载路由单独包裹Suspense #

适合需要给不同懒加载路由设置个性化加载提示的场景：

import { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";
import NotLazyComponent from "./NotLazyComponent";

const LazyOne = lazy(() => import("./LazyOne"));
const LazyTwo = lazy(() => import("./LazyTwo"));

const App = () => {
  return (
    <Routes>
      <Route path="/not-lazy" element={<NotLazyComponent />} />
      <Route 
        path="/lazy-one" 
        element={
          <Suspense fallback={<div>Loading...</div>}>
            <LazyOne />
          </Suspense>
        } 
      />
      <Route 
        path="/lazy-two" 
        element={
          <Suspense fallback={<div>Loading...</div>}>
            <LazyTwo />
          </Suspense>
        } 
      />
    </Routes>
  );
};

export default App;

方案二：通过嵌套路由统一包裹Suspense #

如果多个懒加载路由的加载提示一致，用这种方式可以减少重复代码：

import { lazy, Suspense } from "react";
import { Route, Routes, Outlet } from "react-router-dom";
import NotLazyComponent from "./NotLazyComponent";

const LazyOne = lazy(() => import("./LazyOne"));
const LazyTwo = lazy(() => import("./LazyTwo"));

const App = () => {
  return (
    <Routes>
      <Route path="/not-lazy" element={<NotLazyComponent />} />
      {/* 父路由提供统一的加载状态处理 */}
      <Route 
        element={
          <Suspense fallback={<div>Loading...</div>}>
            <Outlet />
          </Suspense>
        }
      >
        <Route path="/lazy-one" element={<LazyOne />} />
        <Route path="/lazy-two" element={<LazyTwo />} />
      </Route>
    </Routes>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者nz_19