路由

Gatsby 网站之所以如此之快，部分原因在于许多工作都在构建时完成，而运行的网站是 由 CDN 提供服务的静态内容。在构建过程中，Gatsby 会创建用于访问页面的路径，并为您处理 路由。创建 Gatsby 应用的导航需要理解这些路径是什么以及它们是如何生成的。

您的应用程序通常会包含在构建时未知的路由。这包括需要身份验证或动态内容的路由。为了处理这些页面，您可以使用 仅客户端路由，使用 Gatsby 内置的 @reach/router。

创建路由

可以通过三种方式创建路由

• 通过在 src/pages 中创建 React 组件
• 通过使用 文件系统路由 API 以编程方式从 GraphQL 创建页面，以及创建仅客户端路由。
• 通过在站点的 gatsby-node.js 中实现 createPages API。（插件也可以实现 createPages 并为您创建页面。）

在 src/pages 中定义路由

Gatsby 为 src/pages 中的每个 .js 文件生成页面。浏览器路径是根据文件路径生成的。

将此组件添加到 src/pages/index.js 以为您的网站创建主页。

例如，src/pages/contact.js 创建的页面是 yoursite.com/contact，而 src/pages/home.js 创建的页面是 yoursite.com/home。这适用于文件创建的任何级别。如果 contact.js 被移动到 src/pages 目录下的一个名为 information 的目录中，则该页面现在将在 yoursite.com/information/contact 创建。

此规则的例外是任何名为 index.js 的文件。具有此名称的文件与其所在目录匹配。这意味着根 src/pages 目录中的 index.js 通过 yoursite.com 访问。但是，如果 information 目录中存在 index.js，则它将在 yoursite.com/information 创建。

请注意，如果特定目录没有 index.js 文件，那么该根页面将不会被创建，尝试导航到该页面将跳转到 404 页面。例如，yoursite.com/information/contact 可能存在，但这并不保证 yoursite.com/information 存在。

使用文件系统路由 API

除了在 src/pages 中创建单页路由外，您还可以基于其中节点集合的模型创建多个页面。为此，请在文件路径中使用大括号（{ }）来表示与 节点内的字段相关的动态 URL 段。

当您想根据 GraphQL 数据以编程方式创建页面时，例如为您的博客创建单独的博文页面，就可以使用文件系统路由 API。通过此 API，您可以通过在文件名中添加一些额外的符号来控制文件路径和查询的数据，而无需触碰或创建 gatsby-node.js。

例如，假设您有一个名为 Product 的模型

• src/pages/products/{Product.name}.js => /products/burger

有关更多详细信息，请参阅 文件系统路由 API 文档。

使用 gatsby-node.js

文件系统路由 API 应该足以满足大多数用例，但如果您需要额外的控制，例如通过 pageContext 传递数据或修改 path，您可以在 gatsby-node.js 文件中使用 Gatsby Node API，包括 createPages 函数。此函数将为您提供对 createPage 操作的访问权限，该操作是程序化创建页面的核心。以下是使用 Gatsby 的数据层从 Markdown 文件创建页面的示例

用于创建这些页面的数据不一定必须来自 Gatsby 的内部 GraphQL 数据层。例如，您可以获取本地文件或对远程 API 进行异步调用。有关更多信息，请参阅 创建和修改页面。

path 不能预先编码（即使用 encodeURI），但支持 Unicode 字符。因此，对于像 /exámple 这样的路径，请直接传递字符串。不要传递 encodeURI('/exámple') 或 /ex%C3%A1mple。如果您从 CMS 收到预编码的路径，您可能需要先运行 decodeURI 来确保特殊字符（例如 %C3%A1）恢复为 Unicode。

路由冲突

由于创建页面的方式有多种，不同的插件、主题或 gatsby-node 文件中的代码部分可能会意外地创建多个具有相同路径的页面。发生这种情况时，Gatsby 会在构建时显示警告，但网站仍会成功构建。在这种情况下，最后构建的页面将可用，而其他冲突的页面将不可用。将任何冲突的路径更改为生成唯一的 URL 应该可以解决问题。

嵌套路由

如果您的目标是定义多层深度路径，例如 /portfolio/art/item1，那么可以在创建页面时直接完成，如 在 src/pages 中定义的路由 中所述。

或者，如果您想创建将在 URL 路径（例如特定的侧边栏小部件）的驱动下显示不同子组件的页面，Gatsby 可以在页面级别使用 布局 来处理。

路由间链接

为了在页面之间进行链接，您可以使用 gatsby-link。使用 gatsby-link 可以为您提供内置的 性能优势。

或者，您可以使用标准的 <a> 标签在页面之间进行导航，但这样将无法获得预加载的好处。

在大多数情况下，Gatsby 会为您处理滚动位置恢复。要跟踪和恢复其他容器中的滚动位置，您可以使用 useScrollRestoration 钩子。

创建需要身份验证的路由

对于涉及敏感信息或其他动态行为的页面，您可能希望在服务器端处理这些信息。Gatsby 允许您创建 仅客户端路由，这些路由位于身份验证门后面，确保只有授权用户才能访问信息。

性能与预加载

为了提高性能，Gatsby 会查找当前页面上出现的链接以执行预加载。在用户点击链接之前，Gatsby 已经开始获取它指向的页面。了解有关预加载的更多信息。