前端路由切换不再白屏：React/Vue 实战优化全攻略（含可运行 Demo）

在这里插入图片描述

摘要

在单页应用（SPA）开发中，React、Vue、Angular 这些主流框架都依赖前端路由来完成页面切换。好处是显而易见的：首屏资源一次加载，后续页面切换靠前端路由完成，体验比传统的多页应用要顺畅很多。

但是在实际开发中，我们常常遇到这样的问题：

点击菜单跳转页面，突然白屏一闪
页面要等几秒钟才能渲染出来
动画缺失，切换显得非常生硬

这些问题的根源其实很简单：组件卸载和资源加载的空档期。如果在这个过程中没处理好，就会暴露出“白屏”或者“闪烁”的问题。本文会结合实际项目场景，介绍几种常见的优化方案，包括懒加载过渡、保持布局、动画切换等，并给出详细的 React 和 Vue 示例代码。

引言

在现代前端开发中，前端路由基本上是标配。
比如：

React 生态里有 React Router
Vue 生态里有 Vue Router
Angular 内置了强大的路由系统

这些路由库都支持 懒加载，也就是按需加载组件。它的优势是显而易见的：首屏更快，代码拆分更合理。但是它也带来了一个问题：首次加载某个路由页面时，组件还没下载和渲染完成，此时浏览器什么都显示不出来，就会出现用户能感知到的“空白”时刻。

另外，有些人写路由时把整个布局组件也放进了路由中，每次切换时连导航栏、侧边栏都要卸载重建，直接导致“闪屏”。

所以我们需要一些办法：

提前准备一个占位符，让用户在等待时也有东西可看
保证布局组件不会随路由卸载
加上动画效果，让过渡显得更自然

接下来，我们一个个来看。

路由切换常见优化方式

路由懒加载 + 占位过渡组件

React 示例

React 在 16.6 以后提供了 lazy 和 Suspense，可以轻松实现路由懒加载。

我们先看一段代码：

// App.jsx
import { Suspense, lazy } from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";// 使用 React.lazy 懒加载页面组件
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));export default function App() {return (<BrowserRouter><div className="layout">{/* 公共头部，始终存在，不会被卸载 */}<header><nav><Link to="/">首页</Link> | <Link to="/about">关于</Link></nav></header><main>{/* Suspense 用来兜底，避免白屏 */}<Suspense fallback={<div>页面加载中...</div>}><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Suspense></main></div></BrowserRouter>);
}

代码解释

React.lazy：把 Home 和 About 页面异步引入，只有在访问时才会加载。
Suspense：它的 fallback 属性就是一个占位内容。当 Home 或 About 还没下载回来时，就显示 fallback，避免出现纯白屏。
layout：我们把 header 导航栏写在了外层，而不是放到路由里。这样路由切换时，导航不会被销毁重建。

效果

切换到 /about 时，如果 About 组件还没加载好，就显示“页面加载中…”。
一旦加载完成，就替换成真正的页面内容。

这样处理后，用户不会再看到突然的白屏。

保持公共布局不卸载

有时候白屏不是因为网络慢，而是因为你写路由的方式不对。

常见的坑是这样的：

<Routes><Route path="/" element={<Layout />} /><Route path="/about" element={<Layout />} />
</Routes>

你可能以为这样能保证布局统一，其实问题很大。因为每次切换路由，React Router 都会重新渲染一个新的 Layout，导致导航栏、侧边栏都被销毁重建。

正确的做法是：把 Layout 写在外层，只让 Outlet 区域发生变化。

// Layout.jsx
import { Outlet, Link } from "react-router-dom";export default function Layout() {return (<div className="admin-layout"><aside><nav><Link to="/">首页</Link><Link to="/about">关于</Link></nav></aside><section className="content">{/* 这里是子路由渲染区域 */}<Outlet /></section></div>);
}

路由配置：

// App.jsx
<Routes><Route path="/" element={<Layout />}><Route index element={<Home />} /><Route path="about" element={<About />} /></Route>
</Routes>

这样做的好处：

Layout 组件只会渲染一次，切换路由时不会被销毁。
导航栏和侧边栏都保持稳定，只替换右侧的 Outlet 区域。

这在后台管理系统里特别重要，因为那里的导航和菜单几乎都是固定的。

增加页面切换动画

光解决白屏还不够，如果你想要更丝滑的体验，可以加动画。比如：

页面淡入淡出
页面左右滑动
渐进加载

React 动画版示例

我们用 react-transition-group 来实现淡入淡出效果。

// AppWithAnimation.jsx
import { Suspense, lazy } from "react";
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./styles.css";// 懒加载页面
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));export default function AppWithAnimation() {const location = useLocation();return (<div className="layout"><main><Suspense fallback={<div>页面加载中...</div>}><TransitionGroup><CSSTransitionkey={location.pathname}classNames="fade"timeout={300}><Routes location={location}><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></CSSTransition></TransitionGroup></Suspense></main></div>);
}

对应的 CSS：

/* styles.css */
.fade-enter {opacity: 0;
}
.fade-enter-active {opacity: 1;transition: opacity 300ms ease-in;
}
.fade-exit {opacity: 1;
}
.fade-exit-active {opacity: 0;transition: opacity 300ms ease-in;
}

解释

TransitionGroup：一个容器，可以让多个 CSSTransition 元素管理进入/离开动画。
CSSTransition：根据路由变化触发 className（如 .fade-enter、.fade-exit）。
key={location.pathname}：保证每次路由切换都会触发新的动画。

效果就是：
切换 / 和 /about 页面时，不是瞬间切换，而是先淡出再淡入，体验更自然。

实际场景举例

场景一：后台管理系统

后台系统里通常有一个固定的侧边栏和导航栏，只需要替换右侧的内容区。

如果直接把 Layout 放进每个路由，就会导致导航栏不断销毁重建，页面看起来就会闪一下。

正确做法就是：保持公共布局不卸载，只切换 Outlet 区域。

// routes.jsx
<Routes><Route path="/" element={<Layout />}><Route index element={<Dashboard />} /><Route path="users" element={<UserList />} /><Route path="orders" element={<OrderList />} /></Route>
</Routes>

这样，Layout 的导航栏和侧边栏始终存在，用户管理、订单管理这些页面在右侧切换时不会造成闪烁。

场景二：移动端应用

在新闻 App 或电商 App 中，页面切换非常频繁。
如果每次都突然白屏，用户的感知会非常差，甚至以为卡顿。

这类场景下，通常会采用：

懒加载 + 占位符（比如显示骨架屏）
切换动画（比如左滑进入，右滑退出）

骨架屏示例（React 简化版）：

function Skeleton() {return (<div className="skeleton"><div className="skeleton-title"></div><div className="skeleton-line"></div><div className="skeleton-line"></div></div>);
}

CSS：

.skeleton {background: #f0f0f0;padding: 20px;
}
.skeleton-title {width: 60%;height: 20px;background: #ddd;margin-bottom: 10px;
}
.skeleton-line {width: 100%;height: 14px;background: #eee;margin-bottom: 8px;
}

这样，在文章内容还没加载完时，用户看到的不是白屏，而是一个“假的页面骨架”，体验要好得多。

QA 环节

Q: 为什么我用了懒加载，还是会出现白屏？
A: 你可能没有在外层加 Suspense，或者把 Layout 写进了路由里，导致每次切换都要重新渲染。

Q: 动画会不会影响性能？
A: 一般不会，像淡入淡出、滑动这种 CSS 过渡，浏览器优化得很好。但不要在同一时间渲染大量动画，否则可能会卡顿。

Q: 如果我想提前加载下一个页面怎么办？
A: 可以手动触发 import() 实现预加载。比如在鼠标 hover 到菜单时就提前加载目标页面，这样点击时就秒开。

// 预加载 About 页面
const preloadAbout = () => {import("./pages/About");
};<Link to="/about" onMouseEnter={preloadAbout}>关于</Link>

总结

前端路由切换出现白屏或闪烁，本质上就是组件卸载和资源加载的空档期造成的。

解决方法主要有三种：

懒加载 + 占位过渡：用 Suspense 或骨架屏兜底。
公共布局保持不卸载：只切换子路由内容，避免闪屏。
页面切换动画：用 CSS 过渡或动画库，让体验更丝滑。

在后台管理系统、移动端应用、电商网站等场景中，这些优化方案都能显著改善用户体验。

如果项目里经常有大页面懒加载，建议配合预加载策略和骨架屏，做到既不卡首屏，又不卡路由切换。