兄弟，我之前刚踩过这个一模一样的坑！你这个情况是单页应用（SPA）部署时的经典问题——React Router用的是前端路由，服务器压根不知道这些子路由对应的文件，所以直接访问或者刷新子路由时就会返回404，只有根路径能正常加载。

先确认下你的App.jsx路由配置本身是没问题的：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Callback from "./pages/callback";
import Home from "./pages/home";
import Logout from "./pages/logout";
import HomePage from "./pages/homepage";
import Moderation from "./pages/moderation";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/home" element={<Home />} />
        <Route path="/callback" element={<Callback />} />
        <Route path="/logout" element={<Logout />} />
        <Route path="/moderation" element={<Moderation />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

问题出在服务器配置上，得让服务器把所有路由请求都 fallback 到index.html，这样React Router才能接管路由逻辑。下面给你分场景说解决方案：

1. 本地预览用vite preview #

其实vite preview默认已经处理了这个问题，用这个命令启动预览的话，所有路由应该都能正常访问。但如果是用http-server这类第三方静态服务器，就得额外配置了。

2. Nginx部署场景 #

找到Nginx的站点配置文件，在server块里添加这段配置：

location / {
  try_files $uri $uri/ /index.html;
}

意思是：先尝试找请求的文件/目录，找不到就返回index.html，交给前端路由处理。配置完记得重启Nginx生效。

3. 部署到Netlify/Vercel这类平台 #

• Netlify：在项目根目录新建一个_redirects文件，内容写：

  /*    /index.html   200
  

  提交到仓库，Netlify会自动识别这个文件处理路由。
• Vercel：默认支持SPA路由，万一遇到问题，可以在根目录创建vercel.json，内容：

  {
    "routes": [
      { "src": "/(.*)", "dest": "/index.html" }
    ]
  }
  

4. 部署到自定义子路径（非根域名） #

如果你的项目不是部署在域名根路径（比如https://your-domain.com/my-app/），还要在Vite配置文件vite.config.js里设置base路径：

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

export default defineConfig({
  plugins: [react()],
  base: '/my-app/' // 这里填你的实际部署子路径
})

这个base必须和实际部署路径完全一致，不然静态资源和路由都会出问题。

最后再检查下：构建后的dist文件夹里的文件有没有正确上传到服务器，确保index.html能正常访问，静态资源（js、css、assets）的路径没有错误。

备注：内容来源于stack exchange，提问作者Damian Bergemann