Hostinger部署React+Vite项目子路由刷新报404错误求助

问题描述 #

使用Vite创建React+TypeScript项目，前端路由导航功能正常，但刷新https://example.com/admin/dashboard时出现404错误，根路径https://example.com刷新无异常。项目核心配置及代码如下：

核心代码片段 #

App.tsx 路由配置

<BrowserRouter>
  <Routes>
    <Route path={routes.homepage} index element={<Home />} />
    <Route path={routes.admindash} index element={<AdminDashboard />} />
    <Route path={routes.error} index element={<ErrorPage />} />
  </Routes>
</BrowserRouter>

其中routes.admindash为"/admin/*"

AdminDashboard.tsx 嵌套路由

export const AdminDashboard = () => {
  const pathName = useLocation().pathname;
  useEffect(() => {
      if (pathName === "/admin") {
        navigate(routes.dashboard);
        setMainNavIndex(0);
      }
      // 其他路径判断逻辑...
    }, [pathName]);
  return (
    <div className="h-[90vh] overflow-y-auto">
      <Routes>
        <Route
          path={routes.dashboard}
          index
          element={
            <ProtectedRoute isAuth={isAuth}>
              <DashboardAdmin />
            </ProtectedRoute>
          }
        />
        {/* 其他子路由... */}
      </Routes>
    </div>
  );
};

其中routes.dashboard为"dashboard"

当前.htaccess配置

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

解决步骤 #

1. 修正.htaccess规则 #

原规则仅匹配单级路径，无法覆盖/admin/dashboard这类多级路径，修改为：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  # 直接访问index.html则终止规则处理
  RewriteRule ^index\.html$ - [L]
  # 排除真实存在的文件、目录、符号链接
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  # 转发所有请求到index.html，保留查询参数
  RewriteRule ^(.*)$ /index.html [QSA,L]
</IfModule>

• ^(.*)$匹配所有多级路径
• QSA确保请求的查询参数不会丢失
• L表示执行完该规则后终止后续处理

2. 确认Vite的base配置 #

在vite.config.ts中确保base设置为根路径（部署在域名根目录时）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/' // 若部署在子目录则改为对应路径，如'/admin/'
})

3. 验证Apache Rewrite模块启用 #

登录Hostinger后台：

1. 进入网站 -> 管理网站
2. 找到高级板块，点击Apache模块
3. 确认mod_rewrite已勾选，未勾选则启用并保存

4. 检查路由常量配置 #

确保routes.admindash的通配符配置正确：

export const routes = {
  homepage: '/',
  admindash: '/admin/*', // 必须带*以匹配所有子路径
  dashboard: 'dashboard',
  // 其他路由常量...
}

5. 重新构建部署 #

执行npm run build生成最新的生产构建文件，将dist目录下的所有文件上传到Hostinger的public_html目录，覆盖原有文件。

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