Netlify部署React动态路由失效问题求助

这不是React代码（useEffect/GraphQL变量）的问题，而是Netlify静态托管平台对客户端路由的处理逻辑导致的：

• 本地开发时，BrowserRouter会在客户端处理所有路由跳转，所以一切正常；
• 部署到Netlify后，当你直接访问/posts/xxx这类路径（比如刷新详情页、点击浏览器返回/前进、直接输入URL），Netlify会尝试在服务器上寻找对应的静态HTML文件，而这类文件不存在，所以返回404；
• 从首页点击<Link>跳转是客户端路由，不会触发服务器请求，所以能正常进入详情页。

方法1：添加_redirects文件 #

在项目的public目录下创建_redirects文件，写入以下内容：

/* /index.html 200

这个规则会让Netlify把所有请求都转发到index.html，交给React Router来处理客户端路由。

方法2：使用netlify.toml配置 #

在项目根目录创建netlify.toml文件，添加以下配置：

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

效果和_redirects文件一致，适合需要更复杂Netlify配置的场景。

• 把AllPosts里的<a href={/posts/${edge.slug}}>改成<Link to={/posts/${edge.slug}}>，统一使用React Router的客户端路由跳转，避免不必要的页面刷新；
• 可以删除SinglePost里未使用的variables变量，清理冗余代码。

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