如何部署带可变路由的React项目？Netlify 404问题解决

这个问题的核心是Netlify作为静态文件服务器，默认不会处理单页应用的客户端路由：本地开发时，React自带的dev-server会把所有路由请求都转发到index.html，让React Router去解析；但部署到Netlify后，直接访问带参数的URL（比如/hAdsaSV65asdAdKMs）时，服务器会尝试查找对应路径的文件/文件夹，找不到就返回404。

下面是两种可行的解决方法：

方法1：添加_redirects文件 #

在项目根目录创建一个名为_redirects的文件（注意文件名开头的下划线），内容直接写：

/* /index.html 200

这个规则会告诉Netlify：所有路径的请求都重定向到index.html，并返回200状态码，让React Router接手路由解析。

方法2：通过netlify.toml配置重写规则 #

如果你的项目已经有netlify.toml配置文件，直接在文件中添加以下内容：

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

效果和_redirects文件完全一致，适合需要集中管理Netlify配置的场景。

配置完成后，重新部署项目到Netlify，再次访问带参数的URL，就能正常加载对应页面并通过useParams()获取restaurantId等参数了。

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