Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / handle "page not found" in react?
Ask Question
Utpal Vishwas
Utpal Vishwas

Student

I am Utpal Vishwas from Uttar Pradesh. Have completed my B. Tech. course from MNNIT campus Prayagraj in 2022. I have good knowledge of computer networking.

Message

1 Answers

Aryan Kumar
Aryan Kumar 04 Aug 2023
Report Abuse

There are a few ways to handle a page not found error (404) in React. One way is to use the NotFound component from the react-router-dom library. The NotFound component will render a generic 404 page, which you can customize to fit your needs.

import React from 'react';
import { NotFound } from 'react-router-dom';

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      <NotFound />
    </div>
  );
};

export default App;

Another way to handle a 404 error in React is to create your own custom 404 component. This can be helpful if you want to create a more specific 404 page that is tailored to your application.

Here is an example of a custom 404 component:

import React from 'react';

const NotFound = () => {
  return (
    <div>
      <h1>404 Not Found</h1>
      <p>The page you are looking for could not be found.</p>
      <p>Please try again or contact us if you need help.</p>
    </div>
  );
};

export default NotFound;

No matter which method you choose, it is important to handle 404 errors in React gracefully. This will help to provide a better user experience for your visitors.

MindStick Training