Handle 404 Page Not Found using React Router DOM 6

In this tutorial, we will discuss how to navigate redirection in React routing to a specific page when a page is not found or the path is not matched.

We will be using the React Router DOM package module that provides routing capabilities to the React js application.

React Router DOM provides a wide variety of handy features to manage the navigation behaviour in React applications.

In this guide, we will set up and configure the Router navigation by creating a few sample component files.

How to Implement Redirection in React Application?

Step 1 – Create React Application

Step 2 – Install React Router DOM Package

Step 3 – Create Components

Step 4 – Implement Route Redirection

Step 6 – See In Action

 

Step 1 – Create React Application

To create React applications, your system needs to have create-react-app installed:

npm install create-react-app --global

Thereafter, execute the following npx command to create a new React app with a provided name:

npx create-react-app react-routing-app

Move into the app directory by executing below command:

cd react-routing-app

 

Step 2 – Install React Router DOM Package

To provide routing capabilities in React application, we need to install the react-router doc package library. Execute the following command to install in your application:

npm install react-router-dom

 

Step 3 – Create Components

Now, head towards the src folder and create the components directory. Then create the following component files:

Create src/components/Dashboard.js and update with following code:

import * as React from 'react';
function Dashboard() {
  return <div>Dashboard</div>;
}
export default Dashboard;

Create src/components/Details.js and update with following code:

import * as React from 'react';
function Details() {
  return <div>Details</div>;
}
export default Details;

Create src/component/NotFound.js and update with following code:

import * as React from 'react';
function NotFound() {
  return <div>Page not available</div>;
}
export default NotFound;

 

Step 4 – Implement Route Redirection

Now, we need to define the Routing in our React application. Open the App.js file and update it with the following code:

import * as React from 'react';
import './style.css';
import { Routes, Route, Navigate, Link, BrowserRouter } from 'react-router-dom';
import Dashboard from './components/Dashboard';
import Details from './components/Details';
import NotFound from './components/NotFound';
const App = () => {
  return (
    <div>
      <h2>React Redirect When Page Not Found</h2>
      <BrowserRouter>
        <nav>
          <Link className="navbar-brand" to="/">
            Dashboard
          </Link>
          <Link className="navbar-brand" to="/details">
            Details
          </Link>
          <Link className="navbar-brand" to="/notfoundlinkxyz">
            404 Link
          </Link>
        </nav>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/details" element={<Details />} />
          <Route path="/404" element={<NotFound />} />
          <Route path="*" element={<Navigate to="/404" replace />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
};
export default App;

The BrowserRouter interface needs to wrap around the various React Router components to make it work on a web browser.

Inside the Routes, we have defined the last Route with path="*", this will redirect the user to the path defined inside the Naviage‘s to prop.

We have also added a Link at last with a wrong path, whenever it gets clicked, the redirection will land to 404 path and display the NotFound component content.

 

Step 6 – See In Action

Finally, we can start the development webserver by executing the below command:

npm start

It will open the application at the following URL:

http://localhost:3000/

 

Conclusion

We discussed how to implement Routing in react application using the React Router DOM library. Moreover, how to use various APIs provided by Router DOM to define the routing paths.

We set up a default redirection path which is executed when a wrong or not available path is entered as a URL, in such case a NotFound page is shown to the user.