如何在我的Next.js 13登录和注册页面中隐藏导航栏和页脚?

huangapple go评论60阅读模式
英文:

How can I to hide nav and footer for my login and signup page in Next js 13

问题

我有登录和注册页面,但导航和页脚出现在所有页面上。我不知道如何使导航和页脚不出现在登录和注册页面上。在 Next 12 中,我通常使用 getLayout 函数,但在 Next 13 中,在布局页面中没有组件属性。我该怎么做?

英文:

I have login and Register page but the nav and the footer appears on all page. I dont know how to make the nav and footer not to appear in the login and register page. In Next 12, i usually used the getLayout function but in next 13 there is no component props in the layout page. How can i go about it?

答案1

得分: 1

nextjs13中,您有一个名为layout.js的文件,您可以使用它,但根据您的用例,您希望为登录、注册和其他路由使用不同的布局

要按照的步骤

  1. 为带有导航栏的路由创建路由组
    • 要创建路由组,请在app/内创建一个名为(folderName)的文件夹。您可以随意命名文件夹,但不要删除括号
    • 现在,在app/(folderName)内创建一个名为dashboard的文件夹,在其中可以创建page.jsx文件。
    • 要访问此路由,您可以访问localhost:3000/dashboard括号内的文件夹名称将被忽略
    • 在app/(folderName)内创建一个新的layout.js文件。
    • 新的layout.js文件内,您可以添加导航栏,该导航栏将被仪表板和组内的所有其他路由使用。

供参考 - https://nextjs.org/docs/app/building-your-application/routing/route-groups

  1. 用于登录和注册
    • 您可以在登录和注册时使用app/layout.js,因为此layout.js没有导航栏。

注意:在上述情况中,对于仪表板,您将从组内的layout.js获取内容,但您还将从app/layout.js获取内容。如果您不希望如此,请从app/中删除layout.js,并为登录和注册创建一个路由组,然后在该路由组内单独创建一个layout.js。在上述nextjs文档链接中查看多个根布局

英文:

In nextjs13 you have a layout.js file you can use but as per your use case you want different layout for login, register and a different one for other routes.

Steps to follow

  1. Create route groups for the routes with navbar
  • To group the routes create a folder inside app/ as (folderName). You can name your folder anything but don't remove parenthesis.
  • Now create a dashboard folder inside app/(folderName) and inside that you can create page.jsx file
  • To access this route you can visit localhost:3000/dashboard folder name inside parenthesis will be ignored.
  • Create a new layout.js file inside app/(folderName)
  • Inside the new layout.js you can add navbar which will be used by dashboard and all other routes inside the group.

For reference - https://nextjs.org/docs/app/building-your-application/routing/route-groups

  1. For login and register
  • You can use the app/layout.js for login and register as this layout.js is without navbar.

Note: In the above scenario for dashboard you will have content from the layout.js inside group but you will also have content from app/layout.js
If you don't want that then delete layout.js from app/ and create a route group for login and register and a layout.js inside that route group separately for login and register. Check multiple root layout in above nextjs docs link

答案2

得分: 0

你必须对登录和注册页面使用不同的布局。
在这里是文档链接:https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#nesting-layouts
但简而言之,你只需要在相同的上下文文件夹中创建你的文件:

app/
| layout.js
| login.js
| register.js
| dashboard/
| | layout.js
| | index.js

这样,登录和注册页面将使用相同的布局,dashboard/ 内的任何其他页面也将使用相同的布局。

英文:

You must use a different layout to your login and register pages.
<br />
Here is the Docs https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#nesting-layouts
<br />
But in resume you only need to create your file in the same context folder:
<br />

app/
| layout.js
| login.js
| register.js
| dashboard/
| | layout.js
| | index.js

<br />
This way the pages login and register will use the same layout, and any other page inside dashboard/ have the same layout.

huangapple
  • 本文由 发表于 2023年6月18日 23:06:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/76501175.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定