在 Gatsby 中获取所有现有页面路由的数组

Question

我正在 Gatsby 中创建一个 404 页面，我想根据用户已访问的路径（该路径不存在）为用户提供类似路径名的建议。如何获取网站中所有现有页面的数组？

Answer 1

Gatsby 将您告诉它的每个页面的信息（通过 pages 文件夹或 createPage API）公开为名为 allSitePage 的 GraphQL 字段。我倾向于在我的大多数项目中创建这样的挂钩，因此很容易获得这些信息：

import { graphql, useStaticQuery } from "gatsby"

const useInternalPaths = () => {
  const {
    pages: { nodes },
  } = useStaticQuery(graphql`
    {
      pages: allSitePage {
        nodes {
          path
        }
      }
    }
  `)

  return nodes.map(node => node.path)
}