如何将布局应用于 /pages 子文件夹中的所有路由？

Question

我在/pages (next.js)文件夹和子文件夹中创建了一些路由/account。我想将布局应用于/account子文件夹中的所有页面。

如何在不将布局应用到 中的每个页面的情况下轻松做到这一点/account？

例子

我想将布局应用于profile.js和settings.js。

components/
pages/
 - home.js
 - account/
    - profile.js
    - settings.js
...

任何有关架构的建议将不胜感激！

Answer 1

您可能需要创建一个自定义应用程序并layout根据路线加载 - 使用下面的方法。

IE

// pages/_app.js
import Layout from '../components/layout'
import AccountLayout from '../components/Accountlayout'

export default function MyApp({ Component, pageProps, router }) {

    if (router.pathname.startsWith('/account/')) {

        return (
            <AccountLayout>
                <Component {...pageProps} />
            </AccountLayout>
        )

    }
    return (
        <Layout>
          <Component {...pageProps} />
        </Layout>
    )
}

可能的优化...

在上面的代码中，您可以使用页眉页脚作为帐户和 onn-account 布局之间的通用方式，比如说GlobalLayout- 最终它会变成类似的东西

<GlobalLayout>
<Layout> OR <AccountLayout>
<Component {...pageProps} />
</Layout> or </AccountLayout>
</GlobalLayout>