React 6 路由：2. 嵌套路由处理 404 页面

2024-01-18 17:19:50

轻松掌控 React 6 嵌套路由中的 404 页面

前言

在 React 单页应用程序 (SPA) 中，路由对于管理复杂的 UI 状态至关重要。React 6 引入了增强后的嵌套路由功能，使多层级路由结构的创建变得轻而易举。然而，为了确保用户在访问不存在的路由时获得流畅的体验，处理 404 页面至关重要。

嵌套路由基础

在 React 6 中，通过在 <Routes> 组件内嵌套另一个 <Routes> 组件来实现嵌套路由。这让我们能够创建多层级的路由结构，其中子路由的路径取决于父路由。

示例：

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
  <Route path="/products" element={<ProductsPage />}>
    <Route path="/products/:id" element={<ProductDetailsPage />} />
  </Route>
</Routes>

在上面的例子中，<ProductsPage> 是父路由，而 <ProductDetailsPage> 是子路由。

优雅地处理 404 页面

当用户访问不存在的路由时，React 应用程序通常会崩溃，显示一个错误页面。为了防止这种情况，我们需要显式地处理 404 页面。

我们可以使用 <Route> 组件的 errorElement 属性，它允许我们指定当匹配的路由抛出错误时要渲染的元素。

示例：

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
  <Route path="/products" element={<ProductsPage />}>
    <Route path="/products/:id" element={<ProductDetailsPage />} />
  </Route>
  <Route path="*" element={<NotFoundPage />} />
</Routes>

在这里，<NotFoundPage> 是一个自定义的 404 页面组件，当用户访问任何不存在的路由时，将渲染该组件。

优化 404 页面

除了处理 404 页面外，我们还可以采取一些步骤来优化其用户体验：

简短而清晰的错误消息： 向用户解释请求的页面不存在。
返回主页或其他相关页面的链接： 帮助用户从错误中恢复。

示例：

import { Link } from "react-router-dom";

const NotFoundPage = () => {
  return (
    <div>
      <h1>页面未找到</h1>
      <p>抱歉，您请求的页面不存在。</p>
      <Link to="/">返回主页</Link>
    </div>
  );
};