React Icon Get 67% off the React Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

Handling 404 Routes in React with a Not Found component

In this post you’ll learn how to handle 404 routes in React Router and provide a fallback component for displaying an imfamous 404 Page Not Found error to the user.

In React and React Router, we’re in the land of SPA (Single Page Apps), so naturally there will be no “404” page - but a component instead. The component will need displaying if a route isn’t recognised.

Thankfully, this is nice and easy in React Router!

Inside the <Switch /> component from React Router, we can declare a final <Route /> at the bottom of the route declarations.

🎉 React Router’s <Switch> component will render the first matched component, making it the perfect tool for us!

This means if the routes above haven’t matched, the only possible solution is we’ve hit a route that doesn’t actually exist.

I’ve setup a Hello and NotFound component and added them inside our App:

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Hello from './Hello';
import NotFound from './NotFound';

const App = () => (
      <Route exact path="/" component={Hello} />
      <Route component={NotFound} />

render(<App />, document.getElementById('root'));

Were you expecting more? That’s it! You don’t need to worry about path or exact, we can simply specify the component to render.

🙌 By not using path the route will always match, and it will only match when no other matches above were found.

Let’s use React Router’s <Link to="/oops" /> component inside our Hello component to let the user click and route to /oops - a route that does not exist in our app:

import React from 'react';
import { Link } from 'react-router-dom';

const Hello = () => (
    <p>Click to route to "/oops" which isn't a registered route:</p>
    <Link to="/oops">Let's go</Link>

export default Hello;

And here’s the NotFound component, it’s just a regular functional component that uses React Router’s <Link to="/"> to head back to the home page, or anywhere else you’d like in your app:

import React from 'react';
import { Link } from 'react-router-dom';

const NotFound = () => (
    <h1>404 - Not Found!</h1>
    <Link to="/">Go Home</Link>

export default NotFound;

Check out the live Stackblitz example below and watch the URL change (feel free to change the URL to anything and it will 404 on you):


A nice and easy post for React Router and how to provide a fallback component for when a route is not found.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

I hope you enjoyed the post, and if you’d love to learn more please check out the React courses we’re working on where you’ll learn everything you need to know to be extremely good and proficient at React and the surrounding ecosystem, hooks and beyond!

By using React Router’s <Switch /> and adding the NotFound component at the bottom of our <Route /> declarations we are able to ensure that the route only works when we hit an unregistered route.

Happy coding!

Related blogs 🚀

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.