Page Not Found | No Match Routes

In React Router, when a user tries to access a route that doesn't exist, we can handle it gracefully by showing a 404 Page. This is done by adding a special path="*" route.

To create a 404 page in React Router v6, we define a Route with path="*".

This route will match all undefined paths and render the PageNotFound component.

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'
import Navbar from './Navbar.jsx'
import PageNotFound from './PageNotFound.jsx'

const App = () => {
 return (
    <>
    <Navbar/>
    <Routes>
      <Route path='/' element={<Home/>}/>
      <Route path='/about' element={<About/>}/>
      <Route path='/contact' element={<Contact/>}/>
      <Route path='*' element={<PageNotFound/>}/>
    </Routes>
    </>
  )

}

export default App;

In React Router v6, the path="*" acts as a catch-all route. If no other route matches, this one is rendered.

It ensures that users always see a clear error page instead of a blank screen.

You can style your PageNotFound component with CSS or add navigation links (e.g., Back to Home button) for better UX.