如何配置Vite多页面路由以解决直接访问URL时的404错误

问题根源 #

直接访问URL出现404是因为Render作为静态服务器，会尝试寻找对应路径的物理文件，但SPA的路由属于前端逻辑，服务器不存在/about这类实体文件，因此需要配置重定向规则，让所有请求落到index.html，由React Router接管路由处理。

具体修复步骤 #

1. 确认React Router配置
   确保项目使用BrowserRouter包裹路由（而非HashRouter），示例代码：

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   import Home from './pages/Home';
   import About from './pages/About';
   
   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </Router>
     );
   }
   

2. 添加Render重定向规则
   在项目的public目录下创建_redirects文件，写入以下规则：

   /*    /index.html   200
   

   该规则会让Render将所有路径的请求重写到index.html，并返回200状态码，交由前端路由处理。

3. 验证Vite构建输出
   执行npm run build后，检查dist目录下是否包含index.html和_redirects文件（Vite会自动将public目录的内容复制到dist根目录）。你的现有vite.config.ts中base: '/'的配置无需修改。

4. Render部署设置检查
   在Render的静态站点配置页面，确认“Publish Directory”填写为dist，保存后重新部署站点即可。

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