custom 404 page react laravel inertia

3 min read 22-11-2024

Finding a broken link is frustrating for users. A custom 404 page improves user experience. It also helps keep visitors engaged. This guide shows you how to create a beautiful and functional custom 404 page in your React application using Laravel and Inertia.js. We'll go beyond the default error page, adding a touch of style and functionality.

Understanding the Setup

Before diving in, ensure your development environment is correctly configured. You should have a working Laravel application with Inertia.js integrated. If not, refer to the official Inertia.js documentation for setup instructions. This guide assumes a basic understanding of React, Laravel, and Inertia.js.

Creating the 404 Component in React

First, let's create the React component that will render our custom 404 page. This will be a simple React functional component. We'll include some basic styling and potentially a search bar for users to find what they were looking for.

// src/Pages/Errors/404.jsx
import React from 'react';

const Page404 = () => {
  return (
    <div className="container mx-auto p-8">
      <h1 className="text-4xl font-bold text-center mb-4">404 - Page Not Found</h1>
      <p className="text-lg text-center mb-8">
        Oops! The page you're looking for doesn't seem to exist.
      </p>
      <div className="text-center">
          <a href="/" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Go back to home</a>
      </div>
    </div>
  );
};

export default Page404;

This component uses Tailwind CSS for styling, but you can adapt it to your preferred CSS framework. Remember to install Tailwind if you haven't already: npm install -D tailwindcss postcss autoprefixer.

Integrating the 404 Component with Inertia

Now, we need to tell Inertia.js to use our newly created component when a 404 error occurs. We'll do this by adding a route to our routes/web.php file in Laravel.

// routes/web.php
Route::get('/{any}', function () {
    return Inertia::render('Errors/404');
})->where('any', '.*');

This route uses a wildcard ({any}) to catch all requests that don't match other defined routes. The where('any', '.*') clause ensures that any path is caught, directing all unmatched requests to the Errors/404 component. Place this route after all your other routes.

Styling Your 404 Page (with Tailwind CSS Example)

To add some visual appeal, let’s enhance our 404 page using Tailwind CSS classes. You can use any styling framework or approach you prefer.

// src/Pages/Errors/404.jsx (updated)
import React from 'react';

const Page404 = () => {
    return (
        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
            <img src="/images/404-illustration.svg" alt="404 Not Found" className="w-64 h-64 mb-8" /> {/*Add an illustration*/}
            <h1 className="text-4xl font-bold text-gray-800 mb-4">404 - Page Not Found</h1>
            <p className="text-gray-600 mb-8">Sorry, the page you are looking for could not be found.</p>
            <a href="/" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Go to Homepage</a>
        </div>
    );
};

export default Page404;

Remember to create the /images/404-illustration.svg file and add your desired illustration.

Enhancing User Experience: Adding Search Functionality

To further improve user experience, add a search bar to let users try to find what they're looking for. This requires integrating with your application's search functionality. This is a simplified example:

// src/Pages/Errors/404.jsx (updated with search)
import React, { useState } from 'react';

const Page404 = () => {
    const [searchTerm, setSearchTerm] = useState('');

    const handleSearch = (e) => {
        e.preventDefault();
        // Implement your search logic here, potentially redirecting to search results
        console.log('Searching for:', searchTerm);  // Replace with actual search
    };

    return (
        // ... (rest of the component as before) ...
        <form onSubmit={handleSearch} className="mb-8">
            <input
                type="text"
                placeholder="Search..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="border border-gray-300 rounded px-3 py-2"
            />
            <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Search</button>
        </form>
    );
};

export default Page404;

Remember to replace the placeholder comment with your actual search implementation. This might involve a redirect to a search page or using JavaScript to perform a client-side search.

Conclusion

Creating a custom 404 page significantly enhances the user experience in your React/Laravel Inertia application. By following these steps, you can easily implement a professional-looking and functional 404 page that guides users and improves their overall interaction with your website. Remember to customize the styling and functionality to match your application's design and features.