React项目部署HostGator后非首页刷新报错的问题排查

这确实和路由设置以及HostGator的服务器配置都有关系。本地开发时，React的BrowserRouter靠webpack-dev-server兜底，所有请求都会指向index.html，所以刷新没问题；但部署到HostGator的Apache服务器后，刷新其他页面时，服务器会直接去找对应路径的物理文件——而这些文件根本不存在（因为React是单页应用，只有index.html一个入口），自然会提示站点不存在。

先给你指出路由代码里的一个明显错误：/WeeklyGoal的element里塞了两个组件，还在MilesForm上乱加path属性，这不符合React Router的写法。正确的写法应该是把每个路由单独拆分：

<BrowserRouter>
  <div>
    <Header/>
    <Routes>
      <Route path="/" element={<Home />} /> 
      <Route path="/WeeklyGoal" element={<WeeklyGoal handleChange={handleChange} handleSubmit={handleSubmit} goal={goal} />} />
      <Route path="/MilesForm" element={<MilesForm goal={goal} milesToGo={milesToGo} setMilesToGo={setMilesToGo} />} />
      <Route path="/Weather" element={<Weather />} />
      <Route path="/Pace" element={<PaceCalculator />} />
    </Routes>        
  </div>
</BrowserRouter>

接下来解决服务器的核心问题，步骤如下：

• 在你的React项目的public目录下创建.htaccess文件（如果已经有就直接编辑），写入以下内容：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

这段代码会让Apache把所有不是真实文件/目录的请求，都转发到index.html，这样React Router就能接管路由逻辑了。

• 确保你把打包后的build文件夹里的所有内容，直接上传到HostGator的网站根目录（比如public_html文件夹），不要嵌套在子文件夹里，否则路由路径会不匹配。
• 一般HostGator默认开启了mod_rewrite模块，如果没开，联系客服或者通过cPanel的“Apache模块”选项开启就行。

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