Gatsby v5动态路由配置异常：访问路由显示404而非目标组件

你的核心问题是误用了React Router的路由方式，Gatsby有自己基于文件系统的路由机制，不需要手动用BrowserRouter、Routes来定义路由，这也是导致你访问/projects/1出现404的原因。

下面是具体的修正步骤：

1. 移除React Router相关依赖与代码 #

Gatsby底层已经集成了React Router，但它通过文件系统路由自动管理路由规则，不需要你手动包裹BrowserRouter或定义Route。直接删除projects.js中的BrowserRouter、Routes、Route相关代码。

2. 创建动态路由页面 #

在src/pages/projects目录下创建名为[projectID].js的文件（注意方括号是必填格式，Gatsby会识别[projectID]为URL动态参数），把你的ProjectDetails组件逻辑迁移到这个文件中：

import * as React from 'react'
import { useParams } from 'gatsby'
import Layout from '../../layout'

const ProjectDetailsPage = () => {
  const { projectID } = useParams()

  return (
    <Layout>
      <div>
        <h2>Project {projectID}</h2>
      </div>
    </Layout>
  )
}

export const Head = () => <title>Project {projectID}</title>

export default ProjectDetailsPage

3. 修改Projects列表页面 #

更新src/pages/projects.js，用Gatsby自带的Link组件替换自定义的MyProjectLink，直接指向动态路由地址：

import * as React from 'react'
import { Link } from 'gatsby'
import Layout from '../layout'

const Projects = () => {
  return (
    <Layout>
      <div>
        <Link to="/projects/1">Project 1</Link>
        <br />
        <Link to="/projects/2">Project 2</Link>
      </div>
    </Layout>
  )
}

export const Head = () => <title>Our Projects</title>

export default Projects

关键原理说明 #

• Gatsby的路由规则：src/pages下的每个文件对应一个路由，比如src/pages/projects.js对应/projects，src/pages/projects/[projectID].js对应/projects/:projectID这种动态路由。
• 手动添加BrowserRouter会和Gatsby顶层的路由系统冲突，导致自定义的Route无法被识别，访问动态路径时Gatsby找不到对应的页面文件，就会返回404。
• 如果需要从数据源（如JSON、CMS）自动生成大量动态路由，可以在gatsby-node.js中使用createPages API来实现，但对于少量静态动态路径，用[param].js的文件格式就足够了。

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