PageNotFoundPage 组件

亮色

暗色

The PageNotFoundPage 组件是一个 React 组件，用于在页面未找到（404 错误）时显示友好的提示信息。它提供了页面不可用的可视化指示，并提供一个按钮返回上一页。

在线预览链接

组件代码链接

先决条件

确保在项目中已安装 @neo4j-ndl 库，以便使用此 PageNotFound 组件。

使用

要将 PageNotFoundPage 组件集成到应用中，请确保它已包含在路由配置中

导入组件

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

在路由设置中为该组件添加路由。通常使用捕获所有路由（catch‑all route）来实现。

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

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

组件属性 (Props)

PageNotFoundPage 组件不接受任何 props。

关键组件

导航 Hook

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

const navigate = useNavigate();

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

这利用了浏览器的历史记录栈，将用户带回到其来源页面。