A continuación, dentro de la carpeta Header, crea un archivo index.js. Este archivo tendrá el código mágico para cargar el componente condicionalmente.
1234567891011121314151617181920importReact,{Componente,Suspenso,perezoso }de "reaccionar";// ...classHeaderextiendeComponente{render(){const isDesktop =window.innerWidth,767;if(! isDesktop)return<MobileHeader//;;else{constDesktopHeader=lazy(()=;import("./DesktopHeader"));return(<Suspensefallback={<MobileHeader/<};<DesktopHeader// ...jsx
Eso es más o menos todo lo que necesitas.
La función lazy() crea el componente que se carga usando la función dynamic import(). Acepta una función como su argumento y devuelve una promesa de cargar el componente. Pero los componentes que se crean usando la función lazy() sólo se cargan cuando necesitan ser renderizados.
Por lo tanto, es necesario mostrar algún tipo de marcador de posición o indicador de carga hasta que los componentes se carguen. Ahí es donde el componente entra en escena. El componente está destinado a envolver los componentes perezosos creados por la función lazy().
El código anterior comprueba primero si el usuario está en un escritorio o no usando la propiedad window.innerWidth. Eso determina qué encabezado se debe renderizar. Si se trata de un dispositivo de escritorio, es necesario cargarlo lentamente antes de renderizarlo. Como alternativa a la cabecera del escritorio, el componente se renderiza en caso de que algo salga mal y el componente no se cargue.