如何在 react-router-dom v6.4 中使用 Suspense 和 RouterProvider

问题描述 投票:0回答:2

这些是我拥有的两个组件,我的问题是我在哪里放置 组件以根据需要加载路由?

Navagtion/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;

Root.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 的路线。

reactjs react-router-dom react-suspense
2个回答
0
投票

remix-run/react-router
demo 显示将每个延迟导入的组件包装在自己的
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={<>...</>}>
    <Welcome />
  </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;

0
投票

我把 Root 组件包裹在路由元素上,它是这样工作的:

/路由器/index.jsx

const Root = lazy(() => import('../layout/Root'))

const Home = lazy(() => import('../pages/Home'))
const About = lazy(() => import('../pages/About'))
const Experience = lazy(() => import('../pages/Experience'))
const Projects = lazy(() => import('../pages/Projects'))
const Contact = lazy(() => import('../pages/Contact'))

export const router = createHashRouter([
  {
    path: '/',
    element: <Suspense fallback={<Loader />}><Root /></Suspense>,
    errorElement: <NotFound />,
    children: [
      {
        index: true,
        element: <Home />
      },
      {
        path: '/about',
        element: <About />
      },
      {
        path: '/experience',
        element: <Experience />
      },
      {
        path: '/projects',
        element: <Projects />
      },
      {
        path: '/contact',
        element: <Contact />
      }
    ]
  }
])
© www.soinside.com 2019 - 2024. All rights reserved.