基于Vite的React应用路由配置问题：About组件无法渲染

核心原因 #

Vite 开发服务器默认未配置单页应用路由 fallback，而 Create React App（CRA）的 webpack-dev-server 已默认开启该配置。当直接访问 http://localhost:5173/about 这类子路由时，Vite 会尝试去服务器请求对应的静态文件，找不到就返回 404，导致组件无法渲染；而 CRA 会将所有路由请求重定向到 index.html，让 React Router 前端路由接管。

解决步骤 #

1. 确认路由依赖与基础配置 #

首先确保已安装 react-router-dom（如果没装，执行以下命令）：

npm install react-router-dom
# 或
yarn add react-router-dom

然后检查 App.jsx 的路由结构是否正确（以 React Router v6 为例）：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NavBar from './NavBar';

function App() {
  return (
    <Router>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 配置 Vite 的路由 fallback #

在项目根目录创建或修改 vite.config.js（或 vite.config.ts），添加路由 fallback 配置：

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

export default defineConfig({
  plugins: [react()],
  server: {
    // 开发环境启用路由 fallback，将所有请求重定向到 index.html
    historyApiFallback: true
  },
  build: {
    // 生产环境配置，确保打包后路由正常工作
    rollupOptions: {
      output: {
        // 优化资源打包路径，避免路由冲突
        assetFileNames: 'assets/[name].[hash][extname]'
      }
    }
  }
});

3. 验证解决方案 #

重启 Vite 开发服务器：

npm run dev

现在直接访问 http://localhost:5173/about，即可正常渲染 About 组件。

额外注意事项 #

• 如果使用 React Router v5，路由语法会有差异（用 Switch 替代 Routes，component 或 render 替代 element），但核心的 Vite 配置逻辑一致。
• 生产部署时，需要确保服务器也配置了路由 fallback（比如 Nginx 需配置 try_files $uri $uri/ /index.html;，Netlify/Vercel 则默认支持单页应用路由）。

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