布局

Next.js的App路由
799
2023/06/17 12:30:01
fullstackreactnextjs

本章讨论 Next.js App 路由的布局。相比之前的 Pages 路由，App 路由的布局简单多了：Next.js 会自动调用布局文件。

layout.js

在《约定即配置》章节里我们讲到，layout.js 是属于约定文件之一，它就是用来布局的。在创建完项目之后，默认会生成一个 app/layout.js文件，它是整个应用程序的全局布局文件，也称为*根布局（root layout）*文件。

App 路由中，每个路由都可以有自己的 layout.js，Next.js 的策略是：

  • 只需要定义 layout.js 即可，Next.js 会将路由组件（页面）做为布局组件的子组件进行自动调用
  • 每个层级的布局文件是层级调用的
  • 如果当前路由没有布局文件，那么它会往上级路由找，直到 app/layout.js

修改 app/layout.js

为了更好地演示，我们简单地修改一个 app/layout.js，给它加点样式 ：

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html lang="zh-Hans">
      <body style={{ background: "#fecaca" }}>{children}</body>
    </html>
  );
}

现在访问任一页面，都会看到自动应用了这个样式，因为 Next.js 自动将页面作为布局组件的子组件进行调用。

给 news 添加布局

添加 news/layout.js：

// app/news/layout.js

export default function NewsLayout({ children }) {
  return (
    <div style={{ background: "#ffedd5", padding: "10px" }}>{children}</div>
  );
}

现在分别访问 /news 和 /news/123，你会惊奇地发现：

  • 自动使用了 app/news/layout.js 的布局
  • 同时，还使用了 app/layout.js 的布局
  • 并且，这两个布局形成了层级：即全局布局在外层，路由布局在内层

给news/[id] 添加布局

添加 news/[id]/layout.js：

// app/news/[id]/layout.js

export default function NewsDetailLayout({ children }) {
  return (
    <div style={{ background: "#cffafe", padding: "10px", margin: "20px" }}>
      {children}
    </div>
  );
}
  • /news：和之前没变化，还是使用了 app/news/layout.js 和 app/layout.js
  • /news/123：同时使用了 app/news/[id]/layout.js、 app/news/layout.js 和 app/layout.js

最终效果：

布局

本章代码位于02/布局分支。