MENU


No Match (404)

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

- A <Switch> renders the first child <Route> that matches

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

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


RESETRUNFULL
import React from "react";import {BrowserRouter as Router, Route, Link, Switch, Redirect, useLocation} from
                                                                                                            "react-router-dom";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>
        <Switch>
          <Route exact path="/"><Home /></Route>
          <Route path="/old-match"><Redirect to="/will-match" /></Route>
          <Route path="/will-match"><WillMatch /></Route>
          <Route path="*"><NoMatch /></Route>
        </Switch>
      </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>);}