v6版本升级后路由组件渲染延迟记录

Quinn419 +0/-0 0 0 正常 2025-12-24T07:01:19 React Router

在React Router v6升级后，遇到了一个令人困扰的问题：路由组件渲染延迟。这个问题表现为从一个路由切换到另一个路由时，页面内容会出现短暂的空白或者延迟显示。

问题复现步骤

使用v6版本的<BrowserRouter>包装应用
定义多个路由组件，如<Home />、<About />等
在路由配置中使用<Route path="/" element={<Home />} />语法
切换路由时观察到页面闪烁或延迟显示

根本原因

经过排查，发现这是由于v6版本中移除了v5中的<Switch>组件，改用useRoutes和element属性来处理路由渲染。但当我们使用<Outlet />组件时，如果父路由组件没有正确处理异步数据加载，就会出现这种延迟。

解决方案

// 修复前
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

// 修复后
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomeWithLoader />} />
        <Route path="/about" element={<AboutWithLoader />} />
      </Routes>
    </BrowserRouter>
  );
}

function HomeWithLoader() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  if (!data) return <div>Loading...</div>;
  return <Home data={data} />;
}