Show Error Pages with errorElement using Router in React JS

Welcome to our React JS Tutorial! In this lesson, we’ll learn how to display error pages with the errorElement using Router in React JS.

Step 1: Set up Router in your React application

First, you need to set up the Router in your React application. You can do this by installing the react-router-dom package:

      
        npm install react-router-dom
      
    

After installing the package, you can import and use the Router components in your application. For example:

      
        import React from 'react';
        import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
      
    

Step 2: Create Error Pages for different errors

Next, you need to create Error Pages for different errors that might occur in your application. You can do this by creating separate components for each error page. For example, you can create components like NotFoundPage.js, ServerErrorPage.js, etc.

Here is an example of how you can create a NotFoundPage component:

      
        import React from 'react';

        const NotFoundPage = () => {
          return (
            <div>
              <h1>404 - Not Found</h1>
              <p>The page you are looking for does not exist.</p>
            </div>
          );
        };

        export default NotFoundPage;
      
    

Step 3: Use errorElement to display Error Pages

Finally, you can use the errorElement to display the Error Pages when a specific error occurs. You can do this by using the Switch component and the Route component from the react-router-dom package. For example:

      
        import React from 'react';
        import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
        import NotFoundPage from './NotFoundPage';

        const App = () => {
          return (
            <Router>
              <Switch>
                <Route path="/" exact component={HomePage} />
                <Route component={NotFoundPage} />
              </Switch>
            </Router>
          );
        };

        export default App;
      
    

With this setup, if a user tries to access a route that doesn’t exist, they will be automatically redirected to the NotFoundPage component.

Conclusion

In this lesson, we’ve learned how to show Error Pages with errorElement using Router in React JS. By following these steps, you can provide a better user experience by displaying friendly error pages when errors occur in your application.

We hope you found this tutorial helpful! Keep learning and building amazing React applications!