在现代 Web 应用中，加载反馈是非常重要的一部分。而在 React 应用中，实现页面级别的 Loading 效果是一项常见的需求。
本文将介绍如何在 React 项目中实现页面级别的 Loading 效果。我们将讲解一些实现核心的技术，并且提供一个可用示例代码。
步骤
在实现页面级别的 Loading 效果之前，需要完成以下步骤：
1. 导入依赖
首先，在 React 项目中，我们需要安装和导入 react-router-dom 和 react-loading-overlay 两个依赖。
npm install react-router-dom react-loading-overlay
react-router-dom 用于处理路由，而 react-loading-overlay 用于包装页面内容以实现 Loading 效果。
2. 设置路由
设置路由非常重要，在路由之前无法实现页面级别的 Loading 效果。这里我们假设你已经设置好了路由。
例如，下面是一个简单的路由设置示例：
-- -------------------- ---- -------
------ - -------------- ------- ----- - ---- -------------------
------ -------- ---- -------------------
------ --------- ---- --------------------
-------- ----- -
------ -
---------------
--------
------ ----- -------- -------------------- --
------ ----- ------------- --------------------- --
---------
----------------
--
-
------ ------- ----3. 包装页面内容
在这一步中，我们将使用 react-loading-overlay 来包装页面内容，以便实现 Loading 效果。
例如，下面是一个基于 react-loading-overlay 的简单实现：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- ------------------------
-------- ------------- ---------- -------- -- -
------ -
--------------- ------------------ ------- ------------------
----------
-----------------
--
-
------ ------- ------------其中，我们使用 LoadingOverlay 组件包装应用的主要内容。通过 active 属性来检查是否要启动加载层效果，并使用 spinner 属性设置加载层效果样式。
4. 使用 LoadingPage 组件
在最后一步中，我们将使用 LoadingPage 组件在应用的各个页面上包装内容。
例如，下面是如何使用 LoadingPage 组件在应用的主页上实现 Loading 效果：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----------- ---- ----------------------------
-------- ---------- -
----- ----------- ------------- - ---------------
------------ -- -
------------- -- -
--------------------
-- ------
-- ----
------ -
------------ ----------------------
-----
-------- ---------
---------- -- -- ---- ---------
------
--------------
--
-
------ ------- ---------在示例中，我们使用了 useEffect 钩子来延迟 1.5 秒后设置 isLoading 状态为 false。这意味着我们将在加载 1.5 秒钟后隐藏 Loading 效果样式。最后，我们使用 LoadingPage 组件来包装 HomePage 组件的内容。
总结
在本文中，我们介绍了如何在 React 项目中实现页面级别的 Loading 效果。我们了解了一些实现 Loading 效果核心的技术，并提供了一个简单的示例代码来帮助读者理解学习。希望本文能够帮助你顺利实现页面级别的 Loading 效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646812b1968c7c53b084a423