Create React App部署后刷新页面出现React Router 404问题求助

这是单页应用(SPA)部署到静态服务器时的典型问题，我来帮你搞定！

问题根源 #

本地开发时，React Router的BrowserRouter会在浏览器端处理路由跳转，所有请求本质都是指向根目录的index.html。但部署到infinityfree.net这类静态服务器后，当你刷新页面或直接输入子路由（比如/about）时，服务器会尝试在文件系统中寻找对应路径的实体文件（比如/about/index.html），找不到就返回404——这就是问题的核心。

针对infinityfree.net的解决方案 #

infinityfree.net使用Apache服务器，我们可以通过创建.htaccess文件配置URL重写，让所有路由请求都指向index.html，交由React Router处理。

步骤1：创建.htaccess文件 #

在你的React项目的public目录下（如果是Create React App创建的项目），新建一个名为.htaccess的文件，写入以下内容：

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

步骤2：重新构建并部署 #

执行npm run build重新构建项目，此时.htaccess会被自动复制到build目录中。然后将整个build目录的内容上传到infinityfree.net的主机空间（通常是public_html目录）。

额外验证 #

确认你的路由组件使用的是BrowserRouter（你的代码里的<Router>应该是导入自react-router-dom的BrowserRouter，如果之前导入有误需要调整）：

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

应急替代方案（不推荐长期使用） #

如果暂时无法配置.htaccess，可以改用HashRouter，它会在URL中添加#，所有路由请求都会指向根目录的index.html，不会触发服务器的文件查找：

import { HashRouter as Router, Switch, Route, Link } from 'react-router-dom';

不过这种方案会让URL带上#，用户体验不如BrowserRouter，所以优先推荐.htaccess的配置方案。

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