Gatsby创建带channelId动态路由，使用文件系统路由API访问报错如何解决

解决方案 #

你可以按以下优先级逐一排查修复：

1. 确认Gatsby版本符合要求
   文件系统动态路由API仅在Gatsby v4.7.0及以上版本支持，若你的项目版本低于该要求，先升级Gatsby到最新稳定版即可。
2. 清除缓存重启服务
   新建动态路由文件后经常存在缓存未更新的问题，先终止当前开发服务，执行gatsby clean清除本地缓存后，再重新执行gatsby develop启动服务即可。
3. 修正参数获取逻辑
   动态路由的参数不能直接从react-router-dom导入hook获取，必须从Gatsby包中导出useParams来拿参数，示例代码如下：

// /src/pages/channel/[channelId]/details.tsx
import * as React from 'react'
import { useParams } from 'gatsby'

const ChannelDetailsPage = () => {
  // 泛型可根据你的实际参数类型调整
  const { channelId } = useParams<{ channelId: string }>()
  
  // 后续使用channelId调用你的自研API即可
  return <div>当前频道ID：{channelId}</div>
}

export default ChannelDetailsPage

4. 修正接口请求逻辑
   因为Gatsby会先走服务端渲染阶段，此时不存在浏览器侧的全局对象，你的自研API请求逻辑必须包裹在useEffect中，等到客户端挂载完成后再执行，示例如下：

import * as React from 'react'
import { useParams } from 'gatsby'
import { useEffect, useState } from 'react'

const ChannelDetailsPage = () => {
  const { channelId } = useParams<{ channelId: string }>()
  const [channelInfo, setChannelInfo] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    // 替换为你的自研API地址
    fetch(`/api/channel/${channelId}`)
      .then(res => res.json())
      .then(data => {
        setChannelInfo(data)
        setLoading(false)
      })
  }, [channelId])

  if (loading) return <div>加载中...</div>

  return (
    <div>
      <h1>{channelInfo.name}</h1>
      {/* 渲染你的频道详情内容 */}
    </div>
  )
}

export default ChannelDetailsPage

5. 部署后刷新404的处理
   如果你是打包部署到服务器后出现报错，需要配置服务端的路由回退规则，把所有请求都指向根目录的index.html，以Nginx为例，配置规则如下：

location / {
  try_files $uri $uri/ /index.html;
}

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