React项目部署Netlify后路由刷新失效问题求助

你的问题是典型的单页应用（SPA）部署到静态服务器后的路由问题：页面内点击导航时，是React Router在前端处理跳转，不会向服务器发请求；但刷新页面时，浏览器会直接向Netlify服务器请求/about或/blog这类路径，服务器找不到对应的物理文件，就会返回错误，导致路由失效。

解决步骤 #

只需给Netlify添加重定向配置，让所有请求都指向index.html，交给React Router处理即可：

方法1：创建_redirects文件

在项目的public目录（Create React App项目结构）下新建_redirects文件，写入：

/*    /index.html   200

方法2：创建netlify.toml配置文件

在项目根目录新建netlify.toml文件，写入：

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

原理说明 #

两种配置作用一致：告诉Netlify服务器，无论收到任何路径的请求，都返回index.html文件（状态码200）。刷新页面时，服务器返回SPA入口文件，React Router就能根据当前URL匹配对应的路由组件，正常渲染页面。

你的React路由代码本身没有问题，BrowserRouter和路由表配置都正确，添加上述配置后重新部署到Netlify即可解决刷新路由失效的问题。

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