如何让 React 单页应用跳转到自定义 404 页面

2023-10-20 02:08:06

在 React SPA 中创建自定义 404 页面的完整指南

单页应用程序 (SPA) 以其流畅的用户体验和响应性而著称。然而，当用户访问不存在的页面时，他们往往会遇到冷冰冰的 404 页面，这可能会破坏整体体验。React 路由是一种用于管理 React 应用程序路由和导航的强大工具。通过利用 React 路由，我们可以轻松地为我们的 SPA 创建一个自定义的 404 页面，从而提升用户体验。

配置 React 路由

首先，我们需要安装 React 路由：

npm install react-router-dom

安装完成后，我们导入 React 路由组件：

import { BrowserRouter, Routes, Route } from "react-router-dom";

创建自定义 404 页面

下一步，我们创建一个自定义的 404 页面组件：

import React from "react";

const NotFoundPage = () => {
  return (
    <div>
      <h1>404</h1>
      <p>抱歉，页面不存在。</p>
    </div>
  );
};

export default NotFoundPage;

配置路由

现在，我们需要配置路由并指定 404 页面的路径：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import NotFoundPage from "./NotFoundPage";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* 其他路由 */}
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

部署自定义 404 页面

配置完路由后，我们可以部署应用程序：

npm start

访问不存在的 URL，例如 https://mywebsite.com/non-existent-page，即可查看自定义 404 页面的效果。

常见问题解答

如何设置 404 页面标题？

import React from "react";

const NotFoundPage = () => {
  return (
    <div>
      <Helmet>
        
      </Helmet>
      <h1>404</h1>
      <p>抱歉，页面不存在。</p>
    </div>
  );
};

export default NotFoundPage;

如何自定义 404 页面样式？

在 NotFoundPage 组件中添加 CSS 类或内联样式即可。

我可以使用 React 路由 v6 吗？

是的，代码如下：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import NotFoundPage from "./NotFoundPage";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* 其他路由 */}
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;