默認情況下,當import組件時,對應的CSS也會被加載,這容易造成樣式?jīng)_突,如下:
import MobileApp from './MobileApp' import DesktopApp from './App' //這里MobileApp,DesktopApp組件中的css都會被引入 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <BrowserRouter> <Suspense fallback={<div>Loading...</div>}> {isMobile() ? <MobileApp /> : <DesktopApp />} </Suspense> </BrowserRouter> );
如果想引入不同的組件時,才引入對應的css, 可以如下操作
import React,{lazy,Suspense} from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import isMobile from './funs/isMobile'; const MobileApp = lazy(() => import('./MobileApp')); const DesktopApp = lazy(() => import('./App')); //當真正要渲染時,才加載import const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <BrowserRouter> <Suspense fallback={<div>Loading...</div>}> {isMobile() ? <MobileApp /> : <DesktopApp />} </Suspense> </BrowserRouter> );