配置多个 Layout 组件在 Next.js 中如何实现?

在 Next.js 中,我们可以使用 Layout 组件为应用程序添加一致的布局。一个常见的应用布局是具有不同种类页面的混合应用程序,例如用户的登录页面、仪表板页面和管理员的控制面板等。

在这种情况下,我们需要为每个页面提供其自己的布局。在 Next.js 中,我们可以通过自定义 _app.js,创建多个 Layout 组件来实现这个目的。

创建多个 Layout 组件

我们先来创建三个布局组件,分别是 LoginLayout、DashboardLayout 和 AdminLayout。

LoginLayout:

----- ----------- - -- -------- -- -- -
  -----
    -----------
    ----------
  ------
--
------ ------- ------------

我们可以看到,这个组件只包含了一个 h1 标签和接收 children props 的

标签。这样我们就可以在该布局中呈现不同类型的登录页面,如登录表单或注册表单。

DashboardLayout:

----- --------------- - -- -------- -- -- -
  -----
    ------------
    -----
      ----
        ----
          -- -----------------
        -----
      -----
    ------
    ----------
  ------
--

------ ------- ----------------

这个布局添加了一个导航栏来让用户能够导航到应用的其他部分。

AdminLayout:

----- ----------- - -- -------- -- -- -
  -----
    -------------
    -----
      ----
        ----
          -- -----------------
        -----
        ----
          -- -------------------------
        -----
      -----
    ------
    ----------
  ------
--

------ ------- ------------

这个布局与我们的 DashboardLayout 有些相似,只不过它添加了更多的主导航菜单,让管理员能够访问他们的控制面板。

现在我们已经创建了三个 Layout 组件,我们要如何使用他们?

使用多个 Layout 组件

在我们的 Next.js 应用程序中,我们需要使用我们新创建的 Layout 组件来呈现特定页面的 UI。

为了使用这些布局,我们要做的是在 pages 文件夹中为每个页面创建一个自定义的 _app.js 文件,然后将指定的布局传递给子组件。

例如:为了使用 LoginLayout 布局,我们需要创建一个自定义的 _app.js 文件,然后在该组件中渲染 LoginLayout 组件。

------ ----------- ---- ------------------------------------

-------- ------- ---------- --------- -- -
  ------ -
    -------------
      ---------- -------------- --
    --------------
  --
-

------ ------- ------

通过这种方式,我们可以很容易地为我们的页面切换布局,而不必修改每个页面的样式或布局。

示例代码

此 demo 应用程序包括三个页面(登录、仪表板和管理员控制面板),并使用上面定义的 LoginLayout、DashboardLayout 和 AdminLayout 布局组件。

/pages/_app.js

------ ----------- ---- ------------------------------------

-------- ------- ---------- --------- -- -
  ------ -
    -------------
      ---------- -------------- --
    --------------
  --
-

------ ------- ------

/pages/login.js

------ ---- ---- ------------
------ ----- ---- ----------------------

-------- ---------------- -
  ------ -
    --
      ------
        -----------------
      -------
      ------ --
    ---
  --
-

------ ------- ----------

/components/layouts/LoginLayout.js

----- ----------- - -- -------- -- -- -
  -----
    -----------
    ----------
  ------
--

------ ------- ------------

/pages/dashboard.js

------ ---- ---- ------------
------ --------- ---- --------------------------
------ --------------- ---- ----------------------------------------

-------- -------------------- -
  ------ -
    --
      ------
        ------------------
      -------
      ---------- --
    ---
  --
-

-------------------- - ----------------

------ ------- --------------

/components/layouts/DashboardLayout.js

----- --------------- - -- -------- -- -- -
  -----
    ------------
    -----
      ----
        ----
          -- -----------------
        -----
      -----
    ------
    ----------
  ------
--

------ ------- ----------------

/pages/admin.js

------ ---- ---- ------------
------ -------------- ---- -------------------------------
------ ----------- ---- ------------------------------------

-------- ---------------- -
  ------ -
    --
      ------
        ----------------------
      -------
      --------------- --
    ---
  --
-

---------------- - ------------

------ ------- ----------

/components/layouts/AdminLayout.js

----- ----------- - -- -------- -- -- -
  -----
    ----------------
    -----
      ----
        ----
          -- -----------------
        -----
        ----
          -- -------------------------
        -----
      -----
    ------
    ----------
  ------
--

------ ------- ------------

结论

在本篇文章中,我们讲解了如何在 Next.js 应用程序中添加多个布局,以便为混合应用程序提供一致的 UI。我们学习了如何创建自定义的 _app.js 文件,并如何在其中为每个页面分配布局组件。

希望本文对于那些使用 Next.js 开发复杂应用程序的开发者来说,提供了一个宝贵的参考。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/670b92afd91dce0dc88b562e