React网站部署后刷新显示页面丢失问题排查与解决

这确实是React路由相关的问题。React属于单页应用（SPA），所有页面路由逻辑由前端JavaScript处理，但Hostinger的Apache服务器默认会把刷新请求当作静态文件请求，当服务器找不到对应路径的物理文件时，就会返回“Oops, looks like the page is lost.”的404错误。本地开发时，webpack-dev-server已经自动处理了路由重定向，所以不会出现这个问题。

修复步骤： #

• 在React项目的public目录下创建或编辑.htaccess文件，添加以下配置：

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

• 执行npm run build重新打包项目，将build目录下的所有文件重新上传到Hostinger的网站根目录（通常为public_html文件夹）。

配置说明： #

• RewriteEngine On：开启URL重写引擎
• RewriteBase /：设置重写基准为网站根目录（若部署在子目录，比如yourdomain.com/app，需改为RewriteBase /app/）
• RewriteRule ^index\.html$ - [L]：直接访问index.html时不做任何重写
• 两条RewriteCond规则：判断请求的不是已存在的文件或目录
• RewriteRule . /index.html [L]：将所有符合条件的请求转发到index.html，交由React Router处理前端路由

子目录部署额外配置： #

如果你的网站部署在Hostinger的子目录下，除了修改.htaccess的RewriteBase，还需要在React项目的BrowserRouter组件中添加basename属性，比如：

<BrowserRouter basename="/app">
  {/* 路由组件 */}
</BrowserRouter>

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