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

摘要

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

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

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

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

引言

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

比如：

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

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

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

所以我们需要一些办法：

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

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

路由切换常见优化方式

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

React 示例

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

我们先看一段代码：

jsx 复制代码

// 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 组件还没加载好，就显示"页面加载中..."。
一旦加载完成，就替换成真正的页面内容。

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

保持公共布局不卸载

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

常见的坑是这样的：

jsx 复制代码

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

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

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

jsx 复制代码

// 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>
  );
}

路由配置：

jsx 复制代码

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

这样做的好处：

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

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

增加页面切换动画

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

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

React 动画版示例

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

jsx 复制代码

// 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>
            <CSSTransition
              key={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：

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 区域。

jsx 复制代码

// 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 简化版）：

jsx 复制代码

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

CSS：

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 到菜单时就提前加载目标页面，这样点击时就秒开。

jsx 复制代码

// 预加载 About 页面
const preloadAbout = () => {
  import("./pages/About");
};

<Link to="/about" onMouseEnter={preloadAbout}>关于</Link>

总结

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

解决方法主要有三种：

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

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

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