💲 Black Friday Special

Get an extra 35% OFF everything with coupon code BLACK_FRIDAY

0 days
00 hours
00 mins
00 secs

Write React like a pro. React Icon

Follow the ultimate React roadmap.

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 = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Hello} />
      <Route component={NotFound} />
    </Switch>
  </Router>
);

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 = () => (
  <div>
    <p>Click to route to "/oops" which isn't a registered route:</p>
    <Link to="/oops">Let's go</Link>
  </div>
);

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 = () => (
  <div>
    <h1>404 - Not Found!</h1>
    <Link to="/">Go Home</Link>
  </div>
);

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):

Summary

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

Angular Directives In-Depth eBook Cover

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

  • Green Tick Icon Observables and Async Pipe
  • Green Tick Icon Identity Checking and Performance
  • Green Tick Icon Web Components <ng-template> syntax
  • Green Tick Icon <ng-container> and Observable Composition
  • Green Tick Icon Advanced Rendering Patterns
  • Green Tick Icon Setters and Getters for Styles and Class Bindings

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:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover