Angular icon Get 67% off the Angular Master Bundle!

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

days
hours
mins
secs
  • Blog
  • React
  • Handling 404 Routes in React with a Not Found component

Handling 404 Routes in React with a Not Found component

May 25, 2020 2 mins read

React post
React icon

Want expert React skills? Here's what you need to know.

Show Me View React courses

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.

Exploring JavaScript Array Methods cover

⚡️ FREE eBook: 🔥 ForEach, Map, Filter, Reduce, Some, Every, Find

Todd Motto “This book is straight to the point, syntax exploration, comprehensive guide, real-world examples, tips and tricks - it covers all you need Todd Motto, author of Exploring JavaScript Array Methods

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!

You'll also like...