MENU


No Match (404)

You can use the last <Route> in a <Routes> as a kind of "fallback" route, to catch 404 errors. There are a few useful things to note about this example:

- A <Routes> renders the child <Route> that best matches

- A <Navigate> may be used to redirect old URLs to new ones

- A <Route path="*"> always matches


import React from "react";
import { BrowserRouter as Router, Route, Link, Routes, Navigate, useLocation } from "react-router";

export default function NoMatchExample() {
  return (
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/old-match">Old Match, to be redirected</Link></li>
          <li><Link to="/will-match">Will Match</Link></li>
          <li><Link to="/will-not-match">Will Not Match</Link></li>
          <li><Link to="/also/will/not/match">Also Will Not Match</Link></li>
        </ul>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/old-match" element={<Navigate to="/will-match" replace />} />
          <Route path="/will-match" element={<WillMatch />} />
          <Route path="*" element={<NoMatch />} />
        </Routes>
      </div>
    </Router>
  );
}
function Home() { return <h3>Home</h3>; }
function WillMatch() { return <h3>Matched!</h3>; }
function NoMatch() {
  let location = useLocation();
  return (<div><h3>No match for <code>{location.pathname}</code></h3></div>);
}