使用react-router-dom的路由本地正常，线上直接访问/刷新404求助

这是单页应用（SPA）部署后常见的路由问题——本地开发服务器会自动处理路由跳转逻辑，但线上服务器默认只会查找对应路径的静态文件，找不到就返回404。

问题根源 #

通过网站UI跳转时，是React Router在客户端完成路由切换，不会向服务器发送新的资源请求；但直接输入URL或刷新页面时，浏览器会直接向服务器请求该路径的文件，服务器没有对应文件，就返回了默认的404页面。

不同服务器的配置方案 #

根据你使用的线上服务器类型，添加以下配置，让所有路由请求都指向项目的index.html，交给React Router处理：

Nginx #

修改Nginx的站点配置文件，添加如下规则：

location / {
  try_files $uri $uri/ /index.html;
}

Apache #

在项目根目录创建.htaccess文件，写入：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Netlify #

在项目根目录创建_redirects文件，内容为：

/*    /index.html   200

Vercel #

在项目根目录创建vercel.json，配置：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

额外提醒 #

• 确保你的自定义404页面是通过React Router的Route组件配置的（比如设置path="*"的路由），这样当React Router识别到不存在的路径时，会显示你自己的404页面，而不是服务器的默认404。
• 配置完成后，记得清除服务器缓存再测试效果。

内容的提问来源于stack exchange，提问作者Moe-Joe