React Router Creating 404 page

In this tutorial, we are going to learn about how to handle 404 errors in react-router by creating a (404) not-found page.

What is a 404 page?

A 404 page is also called a not found page when a user visits a wrong path or the path which is currently not available we need to show them a 404 page instead of a blank page so that they can know that the page is not available.

Creating 404 page

Now, in your components folder create a new file called 404.js and add the below code.

import React from 'react';

const NotFound = () => {
  return <h1>404- Page NotFound</h1>;
}

export default NotFound;

Now we need to import this component inside our react routes configuration.

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

import Home from './components/Home';
import About from './components/About';
import NotFound from './components/404';
const Routes = ()=> {
  return (
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
        <hr />
        <Switch>
          <Route exact path="/" component={Home}>
          <Route path="/about" Component={About}/>
          <Route path="*" component={NotFound} />        </Switch>
      </div>
    </Router>
  );
}

In the above code, we wrapped all routes with <Switch> component, because it helps us to render the components only when a path matches if a path does not match with all the available paths it renders a NotFound component.

Let’s test it now by entering a /dummy-path.