6、Gatsby 页面与组件开发全解析

Gatsby 页面与组件开发全解析

在构建 Gatsby 网站时，页面（Pages）和组件（Components）是开发者常用的切入点。页面是 Gatsby 构建网站时使用的高级组件，而组件可以嵌套在页面中，也可以相互嵌套。每次添加新页面时，Gatsby 会自动识别并将其纳入网站构建中。下面将详细介绍 Gatsby 页面、组件以及页面之间的链接方法。

1. Gatsby 页面

页面是 Gatsby 网站中最重要的原子单元。在 Gatsby 中，任何以 src/pages/*.js 形式命名的 React 组件都会被 Gatsby 自动识别为页面并进行渲染。例如，在 “Hello World” 启动器中， src/pages 目录下已经有一个名为 index.js 的页面。

1.1 添加关于页面

通常，一个真正的网站需要一个关于页面，下面来添加一个包含网站相关信息的关于页面。由于 Gatsby 会将任何名为 src/pages/*.js 的新文件识别为新组件，因此只需创建一个名为 about.js 的文件并将其放在该目录下即可。

操作步骤如下：
1. 创建一个新文件 src/pages/about.js ，并粘贴以下代码：

// src/pages/about.js
import React from "react"
export default function