如何在react-router-dom v6.4中将Suspense与RouterProvider一起使用

Question

这是我拥有的两个组件，我的问题是我应该在哪里放置 <React.Suspense> 组件来根据需要加载路由？

导航/index.jsx

import React from "react";
import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements
} from "react-router-dom";
import Root from "./Root";

const router = createBrowserRouter(createRoutesFromElements(Root));

const Navigation = () => {
  return <RouterProvider router={router} />;
};

export default Navigation;

根.jsx

import React from "react";
import { Route } from "react-router-dom";

const PublicLayout = React.lazy(() => "../Layouts/PublicLayout");
const PrivateLayout = React.lazy(() => "../Layouts/PrivateLayout");

const Index = React.lazy(() => "../Pages");
const Welcome = React.lazy(() => "../Pages/Welcome");
const Login = React.lazy(() => "../Pages/Login");
const Register = React.lazy(() => "../Pages/Register");

const Root = (
  <Route path="/" element={<Index />}>
    <Route element={<PublicLayout />}>
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
    </Route>

    <Route element={<PrivateLayout />}>
      <Route path="/welcome" element={<Welcome />} />
    </Route>
  </Route>
);

export default Root;

我如何在组件内延迟加载路由？我在哪里包装来自 Suspense 的所有路线。

Answer 1

该remix-run/react-router 演示展示了将每个延迟导入的组件包装在它们自己的React.Suspense组件中：

import React from "react";
import { Route } from "react-router-dom";

const PublicLayout = React.lazy(() => "../Layouts/PublicLayout");
const PrivateLayout = React.lazy(() => "../Layouts/PrivateLayout");

const Index = React.lazy(() => "../Pages");
const Welcome = React.lazy(() => "../Pages/Welcome");
const Login = React.lazy(() => "../Pages/Login");
const Register = React.lazy(() => "../Pages/Register");

const Root = (
  <Route
    path="/"
    element={(
      <React.Suspense fallback={<>...</>}>
        <Index />
      </React.Suspense>
    )}
  >
    <Route
      element={(
        <React.Suspense fallback={<>...</>}>
          <PublicLayout />
        </React.Suspense>
      )}
    >
      <Route
        path="/login"
        element={(
          <React.Suspense fallback={<>...</>}>
            <Login />
          </React.Suspense>
        )}
      />
      <Route
        path="/register"
        element={(
          <React.Suspense fallback={<>...</>}>
            <Register />
          </React.Suspense>
        )}
      />
    </Route>

    <Route
      element={(
        <React.Suspense fallback={<>...</>}>
          <PrivateLayout />
        </React.Suspense>
      )}
    >
      <Route
        path="/welcome"
        element={(
          <React.Suspense fallback={<>...</>}>
            <Welcome />
          </React.Suspense>
        )}
      />
    </Route>
  </Route>
);

export default Root;

React.lazy

您可以将该Suspense组件放置在惰性组件上方的任何位置。您甚至可以使用单个 Suspense组件包装多个惰性组件。

React.Suspense您还可以创建一个围绕组件的布局路线Outlet。

例子：

import React from "react";
import { Route } from "react-router-dom";

const PublicLayout = React.lazy(() => "../Layouts/PublicLayout");
const PrivateLayout = React.lazy(() => "../Layouts/PrivateLayout");

const Index = React.lazy(() => "../Pages");
const Welcome = React.lazy(() => "../Pages/Welcome");
const Login = React.lazy(() => "../Pages/Login");
const Register = React.lazy(() => "../Pages/Register");

const SuspenseLayout = () => (
  <React.Suspense fallback={<>...</>}>
    <Outlet />
  </React.Suspense>
);

const Root = (
  <Route element={<SuspenseLayout />}>
    <Route path="/" element={<Index />}>
      <Route element={<PublicLayout />}>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
      </Route>
      <Route element={<PrivateLayout />}>
        <Route path="/welcome" element={<Welcome />} />
      </Route>
    </Route>
  </Route>
);

export default Root;

由于该React.Suspense组件只需在树中比惰性组件更高，因此您也可以将其包装RouterProvider在组件Navigation中Suspense。

import React from "react";
import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements
} from "react-router-dom";
import Root from "./Root";

const router = createBrowserRouter(createRoutesFromElements(Root));

const Navigation = () => {
  return (
    <React.Suspense fallback={<>...</>}>
      <RouterProvider router={router} />
    </React.Suspense>
  );
};

export default Navigation;