我在/pages(next.js(文件夹和子文件夹/account中创建了一些路由。我想将布局应用于位于/account子文件夹中的所有页面。
如果不将布局应用于/account中的每一页，我如何轻松做到这一点？
示例
我想将布局应用于profile.js和settings.js。
components/
pages/
- home.js
- account/
- profile.js
- settings.js
...
任何关于架构的建议都将不胜感激！
您可能需要创建一个自定义应用程序，并根据路由加载layout-使用下面的方法。
即
// 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账户布局之间使用页眉-页脚，比如GlobalLayout，最终它会变成类似的东西
<GlobalLayout>
<Layout> OR <AccountLayout>
<Component {...pageProps} />
</Layout> or </AccountLayout>
</GlobalLayout>
更新NextJS 13及以上版本
NextJS团队在版本13中推出了一种名为App router的新型路由器。
它建立在React服务器组件上，支持共享布局、嵌套路由，并具有许多其他超级有用的功能！🎉
看看：https://nextjs.org/docs/app/building-your-application/routing#the-应用程序路由器