Next.js如何根据项目示例设置3种不同的布局

yk9xbfzb 于 11个月前发布在其他

关注(0)|答案(3)|浏览(161)

我使用这个starter项目：

https://github.com/vercel/nextjs-subscription-payments

字符串
目前默认的内容在上面，我想留在原来的家。
现在我想添加管理和 Jmeter 板与不同的布局.
所以我创建了路由：

app/dashboard/layout.tsx - I rename this as DashboardLayout
app/dashboard/page.tsx

型
对于测试，我将相同的内容从：

app/layout.tsx
app/page.tsx

型
问题是现在我有重复的页眉和页脚，当我访问页面 Jmeter 板。所以看起来像仍然在布局 Jmeter 板也从根应用程序布局获取布局。tsx
有谁能帮我弄一下这个结构吗？

next.js

来源：https://stackoverflow.com/questions/77634458/next-js-how-to-set-3-different-layouts-base-on-project-example

3条答案

按热度按时间

nwlls2ji1#

这取决于你的需要。
1.如果布局是相似的。我建议修改您当前的导航栏和页脚为不同的网页。这将导致更少的代码整体。
1.如果布局完全不同，最好在子布局中添加导航栏和页脚，并保留没有页眉和页脚的主布局。
1.如果出于某种原因，您的页眉和页脚必须在根布局中。您可以尝试将其隐藏在不同的页面上。虽然这可能是黑客解决方案。并且您可能需要实现页面加载器以避免双重页眉页脚效果。

<html lang="en">
      <body className="bg-black loading">
        <SupabaseProvider>
          <main
            id="skip"
            className="min-h-[calc(100dvh-4rem)] md:min-h[calc(100dvh-5rem)]"
          >
            {children}
          </main>
        </SupabaseProvider>
      </body>
    </html>

个字符

赞(0）回复(0）举报 11个月前

bttbmeg02#

看起来你只是想避免根布局影响你的dashbaord页面，
如果是这样的话
我认为你可以使用next.js的路由组功能。
（https://nextjs.org/docs/app/building-your-application/routing/route-groups）
您所需要做的就是将页面和布局放在一个带有“（）"的文件夹中。

-- app
--- (layout1)
----- layout.tsx
----- dashboard.tsx
--- (layout2)
----- layout.tsx
----- page.tsx

字符串
通过这样做，您可以轻松地在同一级别上分离页面的布局。

赞(0）回复(0）举报 11个月前

lb3vh1jj3#

这取决于你的需要。
1.如果布局是相似的。我建议你修改你当前的导航栏和页脚为不同的网页。这将导致更少的代码整体。
1.如果布局是完全不同的，你最好的办法是在子布局中添加导航栏和页脚，并且让主布局没有页眉和页脚。
1.如果出于某种原因，您的页眉和页脚必须在根布局中。您可以尝试将其隐藏在不同的页面上。虽然这可能是一个黑客解决方案，您可能需要实现页面加载器以避免双重页眉页脚效果。

赞(0）回复(0）举报 11个月前

我来回答

Next.js如何根据项目示例设置3种不同的布局

3条答案

相关问题

热门标签

最新问答