How to redirect on 404 page using React Routers?

A 404 page is most common used page in every website. Using this we handling unnecessary page on website. 404 page is very helpful for SEO, because if user hits any unnecessary URL on search engine it crawled on google which is effect our website ranking on google. To prevent this issue we redirect every unnecessary URL to our Custom 404 page.

Creating a 404 Page

For React websites, you can use React router to create a useful 404 not found page. Create a 404.js file and copy below code.

import React from "react";

 const Page_404 = () =>{
   return <h2>Page Not Found</h2>;
 }
export default Page_404 ;

Routing to the 404 Page using React

Create App.js files for handle React Routes. Import your 404.js in your Route handling file. We are using “react-router-dom” third-party library to handling route in React. Redirect Parameter is used to redirect to 404 page.

import React from 'react';
import { BrowserRouter as Router, Route, Redirect,Switch } from 'react-router-dom';
import Users from './user/pages/Users';
import Page_404 from './user/pages/404';

const App = () => {
  return <Router>
      <Switch>
      <Route path="/" exact>
        <Users />
      </Route>
      <Route path="/not-found" exact>
        <Page_404 />
      </Route>
      <Redirect to="/not-found" />
      </Switch>
  </Router>;
}

export default App;