React Router本地正常，部署服务器后出现404错误如何解决？

为什么本地正常，部署后出现404？ #

本地开发时，React内置的dev server默认做了路由 fallback 处理——不管访问哪个路径，都会返回根目录的index.html，再由React Router在前端解析路由。但部署到服务器后，服务器会默认按URL路径查找对应静态文件，当访问/works/xxx时，服务器找不到名为works/xxx的文件或目录，就直接返回404了。

另外，你用原生<a>标签跳转的方式，会触发浏览器整页刷新，相当于直接向服务器请求该路径的资源，而非让React Router在前端处理路由切换，这也加剧了问题。

解决步骤 #

1. 用React Router的Link组件替换原生<a>标签 #

改用客户端路由跳转，避免浏览器整页刷新，减少不必要的服务器请求。

修改Gallery组件的跳转代码：

// 先引入Link组件
import { Link } from 'react-router-dom';

// 替换a标签为Link
<Link to={`/works/${item.id}`}>
  <img />
</Link>

点击时React Router会直接在前端切换路由，不会刷新页面，也不会触发服务器资源请求。

2. 配置服务器，让所有路由请求 fallback 到index.html #

即便改用Link，用户直接在地址栏输入/works/xxx或刷新页面时，仍会向服务器请求该路径，因此需要配置服务器，让所有找不到对应文件的请求都返回index.html，由React Router处理路由。

常见服务器的配置方式：

• 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：在public目录下创建_redirects文件，内容：

  /* /index.html 200
  

• Vercel：在项目根目录创建vercel.json文件，内容：

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

总结 #

你的实现逻辑本身没问题，只是忽略了服务器端的路由 fallback 配置，以及原生<a>标签的跳转方式不符合React单页应用的路由逻辑。改用Link组件+服务器fallback配置，就能解决部署后的404问题。

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