PageNotFoundPage Component

Light Dark

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.


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


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';

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

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.