React Router SPA 应用中如何正确处理 404 页面

在 React Router SPA 应用中，404 页面的处理是一个常见的问题。当用户访问一个不存在的路由时，我们需要向用户展示一个友好的提示信息，而不是让用户看到一堆错误信息。本文将介绍如何在 React Router 中正确处理 404 页面。

什么是 404 页面

404 页面是 HTTP 协议中的一个状态码，表示客户端请求的资源不存在。在 Web 开发中，通常会将 404 页面作为一个特殊的页面来处理，向用户展示一个友好的提示信息。

在 React Router 中，当用户访问一个不存在的路由时，React Router 会根据路由规则去匹配对应的组件。如果没有匹配到任何组件，那么就会显示默认的 404 页面。

如何自定义 404 页面

React Router 提供了一个 Switch 组件，用于将多个路由组件包裹在一起，只渲染第一个匹配的组件。我们可以在 Switch 中添加一个自定义的 404 组件，用于处理所有未匹配的路由。

下面是一个示例代码：

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

const NotFound = () => {
  return (
    <div>
      <h1>404 Not Found</h1>
      <p>Sorry, the page you are looking for does not exist.</p>
    </div>
  );
};

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      <Route component={NotFound} />
    </Switch>
  );
};

export default App;

在上面的代码中，我们定义了一个 NotFound 组件，用于显示 404 页面的内容。然后在 Switch 中添加了一个 Route，没有指定路由路径，这个路由会匹配所有未匹配的路由，并渲染 NotFound 组件。

如何处理嵌套路由的 404 页面

在使用嵌套路由时，我们需要注意在子路由中添加一个 404 页面，否则在子路由中匹配不到路由时，会跳转到父路由的 404 页面，这不是我们想要的结果。

下面是一个示例代码：

import React from 'react';
import { Switch, Route, NavLink } from 'react-router-dom';

const NotFound = () => {
  return (
    <div>
      <h1>404 Not Found</h1>
      <p>Sorry, the page you are looking for does not exist.</p>
    </div>
  );
};

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <nav>
        <ul>
          <li>
            <NavLink to="/about">About</NavLink>
          </li>
          <li>
            <NavLink to="/contact">Contact</NavLink>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Welcome} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <nav>
        <ul>
          <li>
            <NavLink to="/about/team">Team</NavLink>
          </li>
          <li>
            <NavLink to="/about/history">History</NavLink>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/about" component={Team} />
        <Route path="/about/team" component={Team} />
        <Route path="/about/history" component={History} />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
};

const Team = () => {
  return <h2>Team</h2>;
};

const History = () => {
  return <h2>History</h2>;
};

const Contact = () => {
  return <h1>Contact</h1>;
};

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route component={NotFound} />
    </Switch>
  );
};

export default App;

在上面的代码中，我们在 Home 组件和 About 组件中都添加了一个 404 页面，用于处理子路由中匹配不到路由的情况。

总结

在 React Router SPA 应用中，正确处理 404 页面是非常重要的。我们可以使用 Switch 组件和自定义的 404 组件来实现这个功能，同时在嵌套路由中，也需要注意添加子路由的 404 页面。希望本文对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658cebfceb4cecbf2d2c90f3