英文:
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
的文件,您可以使用它,但根据您的用例,您希望为登录、注册和其他路由使用不同的布局。
要按照的步骤
- 为带有导航栏的路由创建路由组
- 要创建路由组,请在app/内创建一个名为
(folderName)
的文件夹。您可以随意命名文件夹,但不要删除括号。 - 现在,在app/(folderName)内创建一个名为dashboard的文件夹,在其中可以创建page.jsx文件。
- 要访问此路由,您可以访问localhost:3000/dashboard,括号内的文件夹名称将被忽略。
- 在app/(folderName)内创建一个新的layout.js文件。
- 在新的layout.js文件内,您可以添加导航栏,该导航栏将被仪表板和组内的所有其他路由使用。
- 要创建路由组,请在app/内创建一个名为
供参考 - https://nextjs.org/docs/app/building-your-application/routing/route-groups
- 用于登录和注册
- 您可以在登录和注册时使用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
- 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
- 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论