ReactJS使用window.location.replace跳转Netlify报404如何解决？

这是React单页应用(SPA)部署在静态托管平台的典型共性问题：React应用只有一个入口文件index.html，所有路由逻辑都在前端侧执行。你调用window.location.replace("/dashboard")时会触发浏览器向Netlify服务器发起新的资源请求，而Netlify服务器上不存在/dashboard对应的静态实体文件，就会返回默认404页面。

方案1：配置Netlify重定向规则（最常用，推荐） #

在你项目的public目录下新建名为_redirects的无后缀文件，写入以下内容即可：

/*  /index.html  200

该规则会让Netlify把所有路径的请求都重定向到入口index.html，交由React前端路由处理，不会影响正常的路由逻辑，同时也能解决用户手动刷新子路由页面的404问题。

方案2：使用Netlify配置文件声明规则 #

如果你的项目已经在用netlify.toml做部署配置，可以直接在配置文件中添加以下规则，效果和_redirects文件完全一致：

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

补充优化建议 #

React项目中不推荐直接调用window.location系列方法做页面跳转，会触发整页刷新丢失SPA的路由优势。如果你用的是React Router，可以使用内置的useNavigate钩子完成跳转，示例如下：

import { useNavigate } from 'react-router-dom'

// 在组件内调用
const navigate = useNavigate()
// 登录成功后执行
navigate('/dashboard', { replace: true })

注意该优化仅能避免跳转时触发服务器请求，要彻底解决子路由刷新404的问题，依然需要配置上述的Netlify重定向规则。

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