React + Vite路由重定向至/home后页面未加载，刷新才显示问题排查

React Router 的 <Navigate> 是客户端路由跳转，只会修改浏览器地址栏的 URL，不会向服务器发起新的资源请求。而你放在 public 文件夹里的 home.html 需要服务器返回对应的静态资源，客户端路由跳转时不会触发服务器读取静态文件的逻辑，所以页面不会自动加载；只有刷新浏览器时，浏览器会直接向服务器请求 /home 路径，Vite 开发服务器才会返回 home.html。

以下是几种可行的解决方案：

• 方案1：改用原生跳转触发服务器请求
  替换 <Navigate> 组件，用原生 JS 的 window.location.href 强制浏览器向服务器请求静态资源：

  import { useEffect } from 'react';
  import { Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<StaticHomeRedirect />} />
          <Route path="blog" element={<Blog />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    )
  }
  
  function StaticHomeRedirect() {
    useEffect(() => {
      window.location.href = '/home';
    }, []);
    return null;
  }
  

• 方案2：直接重定向到静态文件路径
  把重定向目标改成 home.html 的完整路径，让浏览器直接请求静态文件：

  <Route index element={<Navigate to="/home.html" replace />} />
  

• 方案3：在React路由中嵌入静态页面
  如果不想离开React应用的上下文，可以用 iframe 嵌入 home.html，同时保留前端路由结构：

  import { Routes, Route, Navigate } from 'react-router-dom';
  
  function HomeStaticPage() {
    return (
      <iframe 
        src="/home.html" 
        frameBorder="0" 
        style={{ width: '100%', height: '100vh', border: 'none' }}
      />
    );
  }
  
  function App() {
    return (
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Navigate to="/home" replace />} />
          <Route path="home" element={<HomeStaticPage />} />
          <Route path="blog" element={<Blog />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    )
  }
  

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