在 React Router SPA 应用中，404 页面的处理是一个常见的问题。当用户访问一个不存在的路由时，我们需要向用户展示一个友好的提示信息，而不是让用户看到一堆错误信息。本文将介绍如何在 React Router 中正确处理 404 页面。
什么是 404 页面
404 页面是 HTTP 协议中的一个状态码，表示客户端请求的资源不存在。在 Web 开发中，通常会将 404 页面作为一个特殊的页面来处理，向用户展示一个友好的提示信息。
在 React Router 中，当用户访问一个不存在的路由时，React Router 会根据路由规则去匹配对应的组件。如果没有匹配到任何组件，那么就会显示默认的 404 页面。
如何自定义 404 页面
React Router 提供了一个 Switch 组件，用于将多个路由组件包裹在一起，只渲染第一个匹配的组件。我们可以在 Switch 中添加一个自定义的 404 组件，用于处理所有未匹配的路由。
下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
----- -------- - -- -- -
------ -
-----
------- --- ----------
--------- --- ---- --- --- ------- --- ---- --- ----------
------
--
--
----- --- - -- -- -
------ -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ -------------------- --
---------
--
--
------ ------- ----在上面的代码中，我们定义了一个 NotFound 组件，用于显示 404 页面的内容。然后在 Switch 中添加了一个 Route，没有指定路由路径，这个路由会匹配所有未匹配的路由，并渲染 NotFound 组件。
如何处理嵌套路由的 404 页面
在使用嵌套路由时，我们需要注意在子路由中添加一个 404 页面，否则在子路由中匹配不到路由时，会跳转到父路由的 404 页面，这不是我们想要的结果。
下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ ------- - ---- -------------------
----- -------- - -- -- -
------ -
-----
------- --- ----------
--------- --- ---- --- --- ------- --- ---- --- ----------
------
--
--
----- ---- - -- -- -
------ -
-----
-------------
-----
----
----
-------- ---------------------------
-----
----
-------- -------------------------------
-----
-----
------
--------
------ ----- -------- ------------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ -------------------- --
---------
------
--
--
----- ----- - -- -- -
------ -
-----
--------------
-----
----
----
-------- -------------------------------
-----
----
-------- -------------------------------------
-----
-----
------
--------
------ ----- ------------- ---------------- --
------ ------------------ ---------------- --
------ --------------------- ------------------- --
------ -------------------- --
---------
------
--
--
----- ---- - -- -- -
------ --------------
--
----- ------- - -- -- -
------ -----------------
--
----- ------- - -- -- -
------ -----------------
--
----- --- - -- -- -
------ -
--------
------ ----- -------- ---------------- --
------ -------------------- --
---------
--
--
------ ------- ----在上面的代码中，我们在 Home 组件和 About 组件中都添加了一个 404 页面，用于处理子路由中匹配不到路由的情况。
总结
在 React Router SPA 应用中，正确处理 404 页面是非常重要的。我们可以使用 Switch 组件和自定义的 404 组件来实现这个功能，同时在嵌套路由中，也需要注意添加子路由的 404 页面。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658cebfceb4cecbf2d2c90f3