部署在Hostinger的ReactJS项目刷新/新标签页出现404错误求助

问题原因 #

使用react-router-dom的BrowserRouter时，前端路由由浏览器端处理，但刷新页面或直接访问子路径（如/about-us）时，服务器会尝试查找对应路径的物理文件，而React单页应用仅存在根目录的index.html，因此返回404错误。

解决步骤 #

• 创建并配置.htaccess文件
  在项目根目录（与index.html同级）新建.htaccess文件，写入以下规则：

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

  该规则会将所有非文件、非目录的请求转发至index.html，交由React Router处理路由逻辑。

• 确保.htaccess上传至服务器
  上传项目文件到Hostinger的public_html目录时，需将.htaccess一同上传（部分FTP工具默认隐藏文件，需开启显示隐藏文件选项）。

• 修正React路由代码的小错误
  你的Index.js中Browserrouter首字母需大写为BrowserRouter，正确写法：

  <BrowserRouter>
    <App />
  </BrowserRouter>
  

  小写组件名会导致React无法识别该内置组件，可能引发路由异常。

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