如何在React Router组件切换时显示加载动画

我完全理解你的困扰——路由切换时无提示的等待确实会让用户体验大打折扣。你之前尝试的页面组件内状态方案无效，核心原因是componentDidMount是在组件已经挂载完成后才执行，这时候组件已经渲染出来了，加载状态根本来不及发挥作用。下面给你几个针对性的可行方案：

方案一：全局层面监听路由切换，控制加载状态 #

你可以在App组件里统一管理加载状态，监听路由变化的时机来触发/关闭加载提示，不用修改每个页面组件：

import { useState, useEffect } from 'react';
import { useLocation, Switch, Route } from 'react-router-dom';

const App = () => {
  const [isLoading, setIsLoading] = useState(false);
  const location = useLocation();

  useEffect(() => {
    // 路由开始切换时立即显示加载
    setIsLoading(true);
    
    // 设置短暂最小等待时间，避免快速切换时的闪屏
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 500);

    return () => clearTimeout(timer);
  }, [location]);

  return (
    <div id="page-container">
      <Nav />
      <main id="main">
        {/* 加载提示层，根据isLoading状态显示 */}
        {isLoading && <div className="loading-overlay">加载中...</div>}
        <Switch>
          <Route exact path="/" component={IndexPage} />
          <Route exact path="/blog" component={BlogPage} />
          <Route exact path="/about" component={AboutPage} />
          <Route component={NotFoundPage} />
        </Switch>
      </main>
    </div>
  );
};

不过这个方案是基于路由变化时间判断加载完成，不是真正的组件/内容加载完成。如果页面组件有异步数据请求，还需要结合下面的方案二。

方案二：页面组件内部管理数据加载状态 #

如果组件加载慢是因为内部有异步数据请求（比如Ajax获取内容），应该把加载状态和数据请求的生命周期绑定，而不是组件挂载：

import { useState, useEffect } from 'react';

const BlogPage = () => {
  const [loading, setLoading] = useState(true);
  const [blogData, setBlogData] = useState(null);

  useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const response = await fetch('/api/blogs');
        const data = await response.json();
        setBlogData(data);
      } catch (err) {
        console.error('加载博客失败:', err);
      } finally {
        // 请求完成（成功/失败）都关闭加载状态
        setLoading(false);
      }
    };

    fetchBlogs();
  }, []);

  // 加载中时直接返回加载提示
  if (loading) {
    return <div className="loading">加载博客内容中...</div>;
  }

  return (
    <article>
      {blogData.map(blog => <div key={blog.id} className="blog-item">{blog.title}</div>)}
    </article>
  );
};

这个方案更精准，真正跟踪的是用户需要的内容是否加载完成，而不是组件是否挂载。

方案三：用React.lazy + Suspense处理组件代码分割 #

如果页面组件本身代码体积很大（比如包含大量第三方库），导致首次加载慢，可以用React的懒加载功能，配合Suspense来显示加载提示：

import { lazy, Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';

// 懒加载页面组件，仅在需要时加载代码
const IndexPage = lazy(() => import('./pages/IndexPage'));
const BlogPage = lazy(() => import('./pages/BlogPage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));
const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));

const App = () => (
  <div id="page-container">
    <Nav />
    <main id="main">
      <Suspense fallback={<div className="loading">加载中...</div>}>
        <Switch>
          <Route exact path="/" component={IndexPage} />
          <Route exact path="/blog" component={BlogPage} />
          <Route exact path="/about" component={AboutPage} />
          <Route component={NotFoundPage} />
        </Switch>
      </Suspense>
    </main>
  </div>
);

这个是React官方推荐的代码分割方案，fallback里的内容只会在组件需要加载时显示，切换已加载过的组件时不会出现动画，完全符合你“只在必要时显示加载提示”的需求。

关于你的疑惑：前一个页面加动画还是Ajax加载内容？ #

• 不推荐在前一个页面加动画：用户点击导航后路由会立即切换，前一个页面组件会被卸载，没法持续显示加载状态。
• Ajax加载内容是可行的，但要结合页面组件内部的状态管理（方案二），或者用全局状态管理工具（比如Context）统一跟踪各个页面的加载状态，这样可以在全局层面显示统一的加载提示。

总结下来，最适合你场景的是方案二+方案一结合：全局处理路由切换的短暂等待，页面内部处理数据加载的等待，不管是组件本身加载慢还是数据加载慢，都能给用户明确的提示。

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