PageNotFoundPage 组件

浅色 深色
DesktopPageNotFoundLight
DesktopPageNotFoundDark

PageNotFoundPage 组件是一个 React 组件，旨在在页面未找到（404 错误）时显示用户友好的消息。它提供了一个视觉指示，表明请求的页面不可用，并提供了一个按钮以导航回上一页。

链接到实时预览

链接到组件代码

先决条件

  • 确保您已在项目中安装了 @neo4j-ndl 库才能使用此 PageNotFound 组件。

用法

要将 PageNotFoundPage 组件集成到您的应用程序中，请确保它是您路由配置的一部分

  1. 导入组件

import PageNotFoundPage from './path/to/PageNotFoundPage';

  1. 在您的路由器设置中为组件添加一个路由。这通常使用通配符路由来完成

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

<Routes>
  // ... All your other routes MUST be before this one
  <Route path="*" element={<PageNotFoundPage />} />
</Routes>

组件属性

PageNotFoundPage 组件不接受任何属性。

关键组件

导航钩子

该组件使用 useNavigate 钩子以编程方式将用户导航回上一页

const navigate = useNavigate();

<Button onClick={() => navigate(-1)}>Go back</Button>

这利用了浏览器的历史堆栈将用户返回到他们来自的地方。