Question

为了使页眉和页脚在我的项目中通用，我将页眉和页脚组件放在_app.js文件中。

下面是我的_app.js文件-

import withRedux from 'next-redux-wrapper';
import { withRouter } from 'next/router';
import dynamic from 'next/dynamic';
import { Provider } from 'react-redux';
import App from 'next/app';
import Layout from 'components/Layout';
import createStore from 'store/createStore';
import MetaInfo from 'components/common/meta-info';
const PwaHeader = dynamic(() => import('components/mobile/pwa-header/PwaHeader'), { ssr: false});
const PwaBottomNav = dynamic(() => import('components/mobile/pwa-bottomNav/PwaBottomNav'), { ssr: false});
const DesktopHeader = dynamic(() => import('components/desktop/desktop-header/DesktopHeader'), { ssr: false});
const DesktopFooter = dynamic(() => import('components/desktop/desktop-footer/DesktopFooter'), { ssr: false});
// import PwaHeader from 'components/mobile/pwa-header/PwaHeader';
// import PwaBottomNav from 'components/mobile/pwa-bottomNav/PwaBottomNav'
// import DesktopHeader from 'components/desktop/desktop-header/DesktopHeader';
// import DesktopFooter from 'components/desktop/desktop-footer/DesktopFooter';
class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
        return {
            pageProps: {
                ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
            }
        }
    }
    render() {
        const { Component, pageProps, store, router } = this.props;
        const { seoData, noIndex, noFollow, canonicalUrl, ampUrl, currentUrl, microData, pageToken, locDataObj, isCmhWebView, footerLinks, cityList, config, deviceCategory, pageName } = router.query;
        const isMobileView = (deviceCategory === 'mobile' || deviceCategory === 'tablet');
        const isDesktopView = (deviceCategory === 'desktop');
        if (locDataObj) {
            locDataObj.config = config;
        }
        return (
            <Provider store={store}>
                <Layout>
                    {
                        (isMobileView) ? <PwaHeader headerData={locDataObj} pageToken={pageToken} /> : (isDesktopView) ? <DesktopHeader headerData={locDataObj} pageToken={pageToken} /> : ''
                    }
                    <Component router={router} {...pageProps} />
                    <MetaInfo seoData={seoData} noIndex={noIndex} noFollow={noFollow} canonicalUrl={canonicalUrl} ampUrl={ampUrl} microData={microData} />
                    {
                        (isMobileView) ? <PwaBottomNav selectedCity={locDataObj.cityName} currentUrl={currentUrl} pageName={pageName} pageToken={pageToken} /> : (isDesktopView) ? <DesktopFooter cityList={cityList} footerLinks={footerLinks ? footerLinks : ''} isCmhWebView={isCmhWebView} /> : ''
                    }
                </Layout>
            </Provider>
        )
    }
}

export default withRedux(createStore)(
    withRouter(MyApp)
)

由于我只想基于isMobileView标志呈现移动或桌面的页眉和页脚。最初，我尝试使用静态导入（现在在代码中已注释了导入），但所有的.js文件都已加载到浏览器中（移动设备和台式机）。然后，我尝试进行动态导入，但是面临的问题是我需要对页眉和页脚组件中存在的所有子组件执行相同的动态导入。由于也有scss文件，因此由于动态导入，这些文件最初并未加载，因此css无法得到反映。有没有更好的方法来解决此问题？

有没有办法在下一个js中动态导入_app.js中的组件？

0 个答案: