Gatsby中使用JSON通过{}文件路由约定创建多路径页面的问题咨询

方案1：使用文件系统路由API原生节点绑定 #

直接调整路由文件命名，明确指定绑定的数据源节点类型即可实现自动过滤，无需额外写查询逻辑：

• 确认你的JSON数据对应Gatsby节点类型：可在开发环境GraphiQL面板（默认地址localhost:8000/___graphql）左侧查询列表查看，默认通过gatsby-transformer-json生成的节点类型为[JSON所在目录名大写]Json，例如JSON存在src/data/items目录下，节点类型为ItemsJson
• 重命名两个路由文件：
  • covers目录下文件重命名为 {你的节点类型.name}.js，例如{ItemsJson.name}.js
  • styles目录下文件重命名为 {你的节点类型.name}.js
    该方式下Gatsby会自动为每个对应节点生成单独页面，页面默认注入当前匹配的单条节点数据，不会返回全量节点。

方案2：页面查询结合路由参数过滤 #

如果需要保留自定义路由命名逻辑，可在页面组件内通过带变量的页面查询实现过滤：

1. 保留原文件命名 covers/{name}.js 和 styles/{name}.js
2. 在页面组件中添加带$name变量的GraphQL查询，Gatsby会自动将路由中的name参数作为查询变量传入，示例代码如下：

import React from "react"
import { graphql } from "gatsby"

// 页面查询自动接收路由name作为变量
export const query = graphql`
  query($name: String!) {
    # 替换为你的实际节点查询名，过滤条件匹配当前路由name
    itemsJson(name: {eq: $name}) {
      id
      name
      # 其他需要的字段
    }
  }
`

export default function CoverPage({ data }) {
  // 这里拿到的就是当前页面对应的单条节点数据
  const pageData = data.itemsJson
  return <div>{/* 你的页面渲染逻辑 */}</div>
}

styles目录下的页面组件同理调整查询返回的字段即可。

内容的提问来源于stack exchange，提问作者Marc62