React Router：如何处理服务器端不存在的页面访问问题？

我太懂这个坑了！之前部署React单页应用时也踩过一模一样的雷——这真的不是React Router的问题，完全是服务器端的配置没跟上。

问题根源 #

本地开发时，create-react-app自带的dev server已经帮我们处理好了路由逻辑：不管你输入localhost:3000/about还是其他子路由，服务器都会先返回根目录的index.html，然后由React Router在浏览器端解析路由、渲染对应的组件。

但部署到生产服务器后，服务器的默认逻辑就不一样了：当用户输入http://example.com/about并回车，它会直接去服务器的文件系统里找/about这个物理文件或目录，找不到就直接返回404错误，根本没给React Router接手处理的机会。

针对不同服务器的解决方案 #

下面是几种常见服务器的配置方法，选对应你的场景就行：

1. Nginx

找到你的Nginx站点配置文件（通常在/etc/nginx/sites-available/目录下），修改location /代码块：

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

保存配置后重启Nginx，这样所有找不到对应物理文件的请求，都会自动转发到index.html，交给React Router处理。

2. Apache

在你的项目部署根目录创建一个.htaccess文件，写入以下规则：

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

这个规则会让Apache把所有非物理文件/目录的请求，都重定向到index.html。

3. Netlify/Vercel 这类静态托管平台

• Netlify：在项目根目录创建_redirects文件，内容如下：

/*    /index.html   200

• Vercel：创建vercel.json文件，写入：

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

平台会自动读取这些配置，帮你完成路由重写。

额外提醒 #

确保你在项目里用的是BrowserRouter（不是HashRouter），HashRouter虽然不会触发这个问题，但URL里会带#，体验不如BrowserRouter。只要服务器配置正确，BrowserRouter就能正常工作啦！

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