forum

home / developersection / forums / handle "page not found" in react?

Ask Question
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.

Follow
Can you answer this question?
Answer

1 Answers

Aryan Kumar

Aryan Kumar

04-Aug-2023

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
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy