如何在React Router中有选择地应用懒加载和悬念到特定路由？

huangapple
go评论107阅读模式
英文:

How to selectively apply lazy loading and suspense to specific routes with React Router?

问题

I want to apply lazy loading to specific routes. 我想对特定的路由应用延迟加载。

英文:

I want apply lazy loading to specific routes. I want something like this:

  1. import { lazy, Suspense } from "react";
  2. import { Route, Routes } from "react-router-dom";
  3. import NotLazyComponent from "./NotLazyComponent";
  5. const LazyOne = lazy(() => import("./LazyOne"));
  6. const LazyTwo = lazy(() => import("./LazyTwo"));
  8. const App = () => {
  9.   return (
  10.     <Routes>
  11.       <Route path="/not-lazy" element={<NotLazyComponent />} />
  12.       <Suspense fallback={<div>Loading...</div>}>
  13.         <Route path="/lazy-one" element={<LazyOne />} />
  14.         <Route path="/lazy-two" element={<LazyTwo />} />
  15.       </Suspense>
  16.     </Routes>
  17.   );
  18. };
  20. export default App;

but this won't work. What is the correct way to do that?

答案1

得分: 0

只有Route和React.Fragment组件是Routes组件的有效子元素。 Suspense需要在其他地方渲染。

您可以在Suspense组件中包装单独的路由：

  1. const App = () => {
  2.   return (
  3.     <Routes>
  4.       <Route path="/not-lazy" element={<NotLazyComponent />} />
  5.       <Route
  6.         path="/lazy-one"
  7.         element={(
  8.           <Suspense fallback={<div>Loading...</div>}>
  9.             <LazyOne />
  10.           </Suspense>
  11.         )}
  12.       />
  13.       <Route
  14.         path="/lazy-two"
  15.         element={(
  16.           <Suspense fallback={<div>Loading...</div>}>
  17.             <LazyTwo />
  18.           </Suspense>
  19.         )}
  20.       />
  21.     </Routes>
  22.   );
  23. };

创建一个包装延迟加载的嵌套路由组件的布局路由：

  1. import { Routes, Route, Outlet } from 'react-router-dom';
  3. const SuspenseLayout = () => (
  4.   <Suspense fallback={<div>Loading...</div>}>
  5.     <Outlet />
  6.   </Suspense>
  7. );
  9. const App = () => {
  10.   return (
  11.     <Routes>
  12.       <Route path="/not-lazy" element={<NotLazyComponent />} />
  13.       <Route element={<SuspenseLayout />}>
  14.         <Route path="/lazy-one" element={<LazyOne />} />
  15.         <Route path="/lazy-two" element={<LazyTwo />} />
  16.       </Route>
  17.     </Routes>
  18.   );
  19. };

或者将Suspense组件提升到Routes组件外部的React树中：

  1. const App = () => {
  2.   return (
  3.     <Suspense fallback={<div>Loading...</div>}>
  4.       <Routes>
  5.         <Route path="/not-lazy" element={<NotLazyComponent />} />
  6.         <Route path="/lazy-one" element={<LazyOne />} />
  7.         <Route path="/lazy-two" element={<LazyTwo />} />
  8.       </Routes>
  9.     </Suspense>
  10.   );
  11. };
英文:

Only the Route and React.Fragment components are valid children of the Routes component. Suspense needs to be rendered elsewhere.

You could wrap individual routes in the Suspense component:

  1. const App = () =&gt; {
  2.   return (
  3.     &lt;Routes&gt;
  4.       &lt;Route path=&quot;/not-lazy&quot; element={&lt;NotLazyComponent /&gt;} /&gt;
  5.       &lt;Route
  6.         path=&quot;/lazy-one&quot;
  7.         element={(
  8.           &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
  9.             &lt;LazyOne /&gt;
  10.           &lt;/Suspense&gt;
  11.         )}
  12.       /&gt;
  13.       &lt;Route
  14.         path=&quot;/lazy-two&quot;
  15.         element={(
  16.           &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
  17.             &lt;LazyTwo /&gt;
  18.           &lt;/Suspense&gt;
  19.         )}
  20.       /&gt;
  21.     &lt;/Routes&gt;
  22.   );
  23. };

Create a layout route that wraps the lazily loaded nested route components:

  1. import { Routes, Route, Outlet } from &#39;react-router-dom&#39;;
  3. const SuspenseLayout = () =&gt; (
  4.   &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
  5.     &lt;Outlet /&gt;
  6.   &lt;/Suspense&gt;
  7. );
  9. const App = () =&gt; {
  10.   return (
  11.     &lt;Routes&gt;
  12.       &lt;Route path=&quot;/not-lazy&quot; element={&lt;NotLazyComponent /&gt;} /&gt;
  13.       &lt;Route element={&lt;SuspenseLayout /&gt;}&gt;
  14.         &lt;Route path=&quot;/lazy-one&quot; element={&lt;LazyOne /&gt;} /&gt;
  15.         &lt;Route path=&quot;/lazy-two&quot; element={&lt;LazyTwo /&gt;} /&gt;
  16.       &lt;/Route&gt;
  17.     &lt;/Routes&gt;
  18.   );
  19. };

Or lift the Suspense component higher in the ReactTree outside the Routes component:

  1. const App = () =&gt; {
  2.   return (
  3.     &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
  4.       &lt;Routes&gt;
  5.         &lt;Route path=&quot;/not-lazy&quot; element={&lt;NotLazyComponent /&gt;} /&gt;
  6.         &lt;Route path=&quot;/lazy-one&quot; element={&lt;LazyOne /&gt;} /&gt;
  7.         &lt;Route path=&quot;/lazy-two&quot; element={&lt;LazyTwo /&gt;} /&gt;
  8.       &lt;/Routes&gt;
  9.     &lt;/Suspense&gt;
  10.   );
  11. };

huangapple
  • 本文由 发表于 2023年5月18日 05:01:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/76276162.html
  • javascript
  • lazy-loading
  • react-router
  • react-suspense
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定