React Router Creating 404 page
In this post we will give you information about React Router Creating 404 page. Hear we will give you detail about React Router Creating 404 pageAnd how to use it also give you demo for it if it is necessary.
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.
Hope this code and post will helped you for implement React Router Creating 404 page. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs