反应路由器 404

在现代的 Web 开发中，路由器是一个重要的组件，用于将不同的 URL 路径映射到相应的处理程序或页面上。当用户访问一个不存在的路由时，通常会返回一个 404 错误页面。在 React 应用中，我们可以使用 React Router 来实现路由功能，并提供自定义的 404 处理。

React Router 简介

React Router 是一个基于 React 的强大路由库，它使我们可以在单页应用中轻松管理多个页面和路由。它提供了一组组件，包括 BrowserRouter、Route 和 Switch 等，用于定义路由规则、处理不同路径的请求，并渲染对应的组件或页面。

自定义 404 页面

当用户访问一个不存在的路由时，我们希望返回一个友好的错误页面，而不是简单地显示默认的浏览器错误信息。为了实现这个目标，我们可以在 React Router 中添加一个专门用于处理 404 的路由。

下面是一个示例的代码片段，演示了如何在 React Router 中定义一个 404 路由：

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

// 导入需要渲染的页面组件
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

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

export default App;

在上述代码中，我们定义了三个路由规则：

• / 路径对应的组件是 Home
• /about 路径对应的组件是 About
• 其他所有路径都会显示 NotFound 组件作为 404 页面

当用户访问一个不存在的路径时，React Router 会自动匹配到 Route 组件中没有指定 path 属性的那个，并将其作为 404 页面进行渲染。

自定义 404 页面的样式

除了显示一个友好的 404 页面外，我们还可以为该页面添加自定义的样式，以使其看起来更符合我们的应用风格。

我们可以使用 CSS 样式表或 CSS 框架来修改 404 页面的样式。下面是一个示例的 CSS 代码片段，用于设置一个简单的居中样式：

.not-found {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 24px;
  color: #555;
}

然后，在 NotFound 组件中添加对应的 CSS 类名：

import React from 'react';
import './NotFound.css';

const NotFound = () => {
  return <div className="not-found">404 - 页面未找到</div>;
};

export default NotFound;

注意，在上述代码中，我们引入了一个名为 NotFound.css 的 CSS 文件，并将 not-found 类名应用到了对应的 div 元素上。

总结

React Router 是一个强大的路由库，它提供了灵活的路由功能，方便我们管理和控制页面导航。通过添加自定义的 404 路由，我们可以为用户提供更好的错误页面体验，并通过自定义样式使其更符合应用的整体风格。