Introduction

In the world of web development, a well-crafted 404 page can significantly enhance user experience and maintain brand identity. When users encounter a broken link or mistyped URL, they deserve not only an informative message but also a way to navigate back to your site effortlessly. In this tutorial, we’ll walk through the process of creating a custom 404 page using Laravel as the back-end framework, Inertia.js for seamless front-end integration, and React as our UI library. By the end of this guide, you’ll be equipped to implement an effective custom error page that keeps users engaged and informed.

Setting Up Laravel with Inertia.js

First things first, let’s ensure we have a Laravel application set up with Inertia.js configured. If you haven’t yet installed Laravel, you can do so via Composer by running the following command:

composer create-project --prefer-dist laravel/laravel my-laravel-app

Once your application is set up, navigate into your project directory and install Inertia.js and the necessary adapter for React:

composer require inertiajs/inertia-laravel

npm install @inertiajs/inertia @inertiajs/inertia-react

Next, configure Inertia in your main web routes file located at routes/web.php. Here you will set up the initial route for your application:

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});

This basic setup allows us to work towards our 404 page while ensuring that our Inertia app is running smoothly.

Creating the 404 Page Component in React

With Laravel and Inertia set up, let’s create a custom 404 React component. Navigate to your React components directory, typically found in resources/js/Pages/. Create a new file named PageNotFound.jsx and add the following code:

import React from 'react';

const PageNotFound = () => {
    return (
        

            
404 - Page Not Found
            
Sorry, we couldn’t find the page you were looking for.
            
Return Home
        
    );
};

export default PageNotFound;

This component provides a user-friendly message indicating that the page does not exist, along with a link to redirect users back to the home page. You can enhance the design by adding CSS styles or incorporating existing styles from your application.

Integrating the 404 Page with Laravel Routing

In Laravel, we need to configure our application to serve the 404 page whenever a route is not found. We can do this by overriding the default render method in the app/Exceptions/Handler.php file. Within the render method, we will check for the 404 error code and return our custom 404 component:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

public function render($request, Throwable $exception)
{
    if ($exception instanceof NotFoundHttpException) {
        return Inertia::render('PageNotFound');
    }

    return parent::render($request, $exception);
}

This ensures that when users attempt to access a non-existent route, they will be greeted with our custom React 404 component. It’s crucial to ensure that the path to our PageNotFound component corresponds correctly to the Inertia rendering process.

Styling the Custom 404 Page

While the basic structure of our 404 page is functional, adding some styles can greatly improve its visual appeal. You can use your existing CSS or, if you’re using a CSS-in-JS solution, incorporate styles directly in your PageNotFound.jsx component. Here’s how you might style it:

const containerStyle = {
    textAlign: 'center',
    padding: '50px',
    backgroundColor: '#f8f9fa',
    border: '1px solid #dee2e6',
};

const PageNotFound = () => {
    return (
        

            
404 - Page Not Found
            
Sorry, we couldn’t find the page you were looking for.
            
Return Home
        
    );
};

These styles will provide a light background and clearly defined text, making the 404 page more engaging. Adjust the colors and layout according to your brand guidelines for a cohesive look.

Testing the Custom 404 Page

Once you have set up your custom 404 page, it’s crucial to test it to ensure everything works as expected. To do this, start your Laravel application using the following command:

php artisan serve

Next, open your browser and navigate to any random URL that does not exist within your application. For example, http://localhost:8000/nonexistent-page. You should see your custom 404 page displayed as intended. Test both the presence of the message and the functionality of the