React Router provides us with a wrapper component called 

 that we can wrap our Routes with so that we can set a catch-all route to handle 404s that thanks to Switch will only get triggered if the routes on top of it don’t match.

How does it do this? Switch will only render the first route that matches!

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</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 path="/" exact>
            <Home />
          </Route>
          <Route path="/will-match">
            <WillMatch />
          </Route>
          <Route path='*'>
            <NoMatch />
          </Route>
        </Switch>
      </div>
    </Router>
  )
}

404 Pages