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

Question

我有登录和注册页面，但导航和页脚出现在所有页面上。我不知道如何使导航和页脚不出现在登录和注册页面中。在 Next 12 中，我通常使用该getLayout功能，但在 next 13 中，布局页面中没有组件道具。我该怎么办？

Answer 1

在nextjs13中，您有一个layout.js可以使用的文件，但根据您的用例，您需要不同的登录布局、注册布局以及其他路由的不同布局。

遵循的步骤

1. 使用导航栏为路线创建路线组

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

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

2. 用于登录和注册

• 您可以使用app/layout.js 进行登录和注册，因为此layout.js 没有导航栏。

注意：在上面的仪表板场景中，您将拥有来自组内的layout.js的内容，但您也将拥有来自app/layout.js的内容，如果您不希望这样，那么从app/中删除layout.js并创建一个路由用于登录和注册的组以及该路由组内的layout.js 分别用于登录和注册。检查上面的 nextjs 文档链接中的多个根布局