Gatsby使用@reach/router动态路由build后直接输URL报404如何解决

问题原因 #

你的Gatsby侧配置完全正确，问题核心是客户的托管服务器未配置单页应用的路由回退规则。
Gatsby客户端路由模式下，只有根路径的index.html是真实存在的静态文件，所有子路由都是前端JS接管渲染的。直接在地址栏输入子路径时，服务器会尝试查找对应路径的静态文件，找不到就返回404。本地gatsby develop和你用http-server运行构建产物正常，是因为这两个环境默认内置了单页应用回退规则，会自动将不存在的路径请求转发到根路径的index.html，交由前端路由匹配。

修复步骤 #

核心配置逻辑：给托管服务器添加规则，所有不存在的静态资源请求，全部回退到根目录的index.html文件即可。
根据客户使用的托管服务类型，选择对应配置：

• Nginx服务器
  在站点的Nginx配置文件中添加如下规则：

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

修改完成后执行nginx -s reload重载配置生效。

• Apache服务器
  在站点根目录新建.htaccess文件，写入以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

• 云静态托管平台
  • Netlify：根目录新增_redirects文件，写入/* /index.html 200
  • Vercel：在vercel.json中配置rewrites规则，将所有路径指向index.html
  • 阿里云OSS/腾讯云COS：在静态网站托管设置中，将自定义错误页设置为index.html，错误响应码改为200

配置完成后清除服务器缓存，重新访问子路径即可正常加载。

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