Блог

У меня есть вопрос о разделении кода в react. Предположим, что у вас есть некоторые компоненты с именами page1, page2 и так далее, а также файл страниц, который экспортирует компоненты страницы с помощью React.lazy, и у вас есть файл приложения в качестве корневого компонента, который отображает эти страницы.

Файл Страниц:

 import React from "react";  const Page1 = React.lazy(() =gt; import("./page1")); const Page2 = React.lazy(() =gt; import("./page2")); const Page3 = React.lazy(() =gt; import("./page3"));  const pages = [{  component: Page1, }, {  component: Page2, }, {  component: Page3, }];  export default pages;  

Файл приложения:

 import React, { Suspense } from "react";  import pages from "./pages";  const App: React.FC = () =gt; (  lt;divgt;  lt;Suspense fallback={lt;divgt;Loadinglt;/divgt;}gt;  {pages.map((c) =gt; lt;c.component /gt;)}  lt;/Suspensegt;  lt;/divgt; );  export default App;  

Когда я пытаюсь выполнить такую настройку в react, проблем нет, и React успешно отображает страницы и создает несколько фрагментов для всех страниц, но я не уверен в этом подходе. Правильно ли я все делаю с точки зрения разделения кода?