PageNotFoundPage Component

Light Dark
DesktopPageNotFoundLight
DesktopPageNotFoundDark

The PageNotFoundPage component is a React component designed to display a user-friendly message when a page is not found (404 error). It provides a visual indication that the requested page is unavailable and offers a button to navigate back to the previous page.

Link to the live preview

Link to the component code

Pre-requisite

  • Ensure you have the @neo4j-ndl library installed in your project to use this PageNotFound component.

Usage

To integrate the PageNotFoundPage component into your application, ensure it is part of your routing configuration:

  1. Import the component:

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

  1. Add a route for the component in your router setup. This is typically done using a 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>

Component Props

The PageNotFoundPage component does not accept any props.

Key components

Navigation Hook

The component uses the useNavigate hook to programmatically navigate the user back to the previous page:

const navigate = useNavigate();

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

This makes use of the browser’s history stack to return the user to where they came from.