How do you implement a catch-all route for handling 404 errors in React Router

Question

Can you tell me How do you implement a catch-all route for handling 404 errors in React Router?

Answer 1

To set up a catch-all route for managing 404 errors in React Router, include a route with path "*" at the end of your routes.

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

import Home from './Home';

import About from './About';

import NotFound from './NotFound'; // 404 component

function App() {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        {/* Catch-all 404 route */}

        <Route path="*" element={<NotFound />} />

      </Routes>

    </Router>

  );

}