Sanity Slug在本地localhost正常但Netlify部署后失效

核心原因1：Netlify静态站点路由 fallback 未配置 #

React是单页应用（SPA），所有路由逻辑由前端处理，但Netlify默认仅响应已存在的静态文件（如index.html、js/css资源）。当直接访问/posts/xxx这类slug路径时，Netlify找不到对应静态文件，直接返回404。

解决方法：

• 在项目根目录创建_redirects文件，添加内容：

  /*    /index.html   200
  

• 或创建netlify.toml文件，配置：

  [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200
  

  部署时Netlify会自动读取配置，将所有路径转发到index.html，交由React路由处理。

核心原因2：Sanity数据集/API配置不一致 #

本地开发可能使用Sanity的开发数据集，但部署到Netlify后，环境变量配置错误（如指向未同步数据的生产数据集），或API令牌无生产数据集读取权限，导致前端拿不到对应slug的文章内容，表现为404（实际是数据为空引发的路由渲染错误）。

解决方法：

• 检查Netlify环境变量：确认SANITY_PROJECT_ID、SANITY_DATASET、SANITY_API_TOKEN（若需）与本地配置一致，或正确指向已同步数据的生产数据集。
• 登录Sanity后台，确认生产数据集已同步所有文章，且API令牌拥有read权限。

可能的原因3：React路由配置问题 #

若使用react-router-dom，需确保：

• 使用BrowserRouter（HashRouter不会有此问题，但URL会带#）；
• 路由规则正确匹配slug路径，示例：

  <Route path="/posts/:slug" element={<BlogPost />} />
  

• 组件内正确从路由参数中获取slug，再向Sanity发起查询。

内容的提问来源于stack exchange，提问作者Sanjay G.