Динамическая загрузка react компонентов с помощью import

Рейтинг: 0Ответов: 2Опубликовано: 02.03.2023

В коде у блоггера есть require, который динамически загружает компонент из папки:

import React from 'react'
import { useParams } from 'react-router-dom'

const generatePage = (page) => {
    const component = () => require(`../pages/${page}`).default
    try {
        return React.createElement(component())
    } catch (error) {
        console.warn(error)
        return React.cloneElement(()=> 404)
    }
}

function PageRenderer() {
    const {page} = useParams()
    const pageName = `${page}`

    return generatePage(pageName)
}

export default PageRenderer

Я попробовал заменить на import, компонент, вероятно, находится но сам импорт возвращает Promise. Не понимаю как, в итоге, вернуть компонент с этим обещанием.

После подсказки попробовал такой код, но увы так не сработало:

function PageRenderer() {
    
    const { page } = useParams()
    const { component } = lazy(() => import(`../pages/${page}`))

    return (
        <Suspense fallback={<div>Loading...</div>}>
          { component }
        </Suspense>
      )
}

export default PageRenderer
reactjs node.js react-router-dom
Источник: Stack Overflow на русском

Ответы

▲ 0

Я попробовал заменить на import, компонент, вероятно, находится но сам импорт возвращает Promise. Не понимаю как, в итоге, вернуть компонент с этим обещанием.

Пробуй применить "обертку" в виде "ленивой загрузки".

import { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('path/to/component'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
};

Более подробнее в этой статье - https://www.aleksandrhovhannisyan.com/blog/react-lazy-dynamic-imports/

▲ 0

Этот код прекрасно работает, просто я был невнимателен с самими страницами, которые пытался загружать. Они были без return-ов.

function PageRenderer() {
    
    const { page } = useParams()
    const Element = lazy(() => import(`../pages/${page}`))

    return (
        <Suspense fallback={<div>Loading...</div>}>
          <Element />
        </Suspense>
      )
}

export default PageRenderer