在单页应用中（Single Page Application，SPA），所有的页面都是在同一页面中通过 JavaScript 动态加载的。当用户在浏览器中输入一个不存在的 URL 或者点击了一个已经失效的链接，就会导致页面显示 404 错误。本文将介绍如何在 SPA 中实现 404 页面，包括具体的实现过程和示例代码。
实现过程
一般情况下，404 页面应该呈现一种友好的用户体验，就好像用户真的打错了网址一样。在 SPA 中，我们需要监听应用的路由变化，当发现路由不存在时，就显示 404 页面。下面是具体的实现步骤：
- 定义 404 页面组件
在 SPA 中，所有的页面都是通过组件的方式来实现的。我们需要先定义一个 404 页面组件，该组件的作用是显示友好的错误信息和推荐的页面。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ---------- -
------ -
-----
------- --- ----------
-------- ------ --- --- ---- --- --------- ----- --- -- ----------
------
--
-- 在路由配置中添加 404 页面
在 SPA 中，路由配置通常是通过 React Router 或者其他路由库实现的。我们需要在路由配置中添加一个匹配所有路径的路由，该路由组件渲染时显示 404 页面组件。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ ---- ---- --------------------
------ -------- ---- ------------------------
------ ------- -------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
---
------ -------------------- --
---------
---------
--
-- 监听路由变化并判断路径是否存在
在 SPA 中，我们通常需要监听路由变化，以便在路由变化时进行相应的操作。在这里，我们需要监听路由变化，并判断当前路径是否存在。如果路径不存在，则显示 404 页面。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ ---- ---- --------------------
------ -------- ---- ------------------------
------ ------- -------- ----- -
----- ------------ -------------- - ---------------------
------------------ -- -
----- --------------- - -- -- -
-- ---------------------------
----- ---------- - ---
--------------------------
--
------------------
----------------------------------- -----------------
------ -- -- -
-------------------------------------- -----------------
--
-- ----
------ -
--------
----------- - -
--------
------ ----- -------- ---------------- --
---
------ -------------------- --
---------
- - -
--------- --
--
---------
--
-示例代码
完整的示例代码可以在 GitHub 上查看。在这个示例中，我们使用了 React 和 React Router 实现了一个简单的 SPA 应用，并添加了 404 页面的支持。该示例中的 404 页面可以自动判断当前路径是否存在，并显示友好的错误信息，同时提供了一个返回首页的按钮。
总结
在 SPA 中实现 404 页面是一个相对简单但十分重要的步骤。通过简单的路由监听和错误处理，我们可以为用户提供更好的用户体验，并让用户更容易地找到他们需要的内容。希望本文的介绍对你有所帮助，欢迎大家在评论区留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6544681a7d4982a6ebe48699