Blazor Custom 404 Error Page

In Blazor, the basic routing is defined in the App.razor file.  You can see the part that handles a known page route and assigns it a layout:

    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>

There is a section, NotFound, that is invoked with the page route is not found.  It will apply a layout as well.  You can see that when a route is not found it simply say “There’s nothing at this address.”

You can see that it is using the default layout as well. 

What we want to do is make a more presentable message page when a 404 page not page error happens.  This will provide a much better user experience.

You can google “Cool 404 pages” and find an endless number of fun custom 404 pages.  We will be using a cute page and adding it into our Blazor application. 

Since we are dealing with Blazor, how to implement this is easy, it’s a component.  So the steps would be:

1. Find or create a cool 404 page

2. Create the error page component

3. Test the component on a regular page

4. Hook up the component in the App.razor page

Create a cool 404 page

I am just going to use an image for this sample.  You can code one from HTML and CSS or do an image or do whatever you like.

Create the error page component

This will be a simple component that contains a section and a link to the image file.  We will put the component in the “Shared” folder so that we can have access to the page from our other pages.  We could make a new folder, “ErrorPages” and place the new component in that folder then we have to include a using statement or put that location in the imports.razor files.  Since the 404 error page is an application level component it makes sense to put it in share to me.

    @inject NavigationManager NavigationManager

    <section>

        <img class="error404page" src="/404Image.png" />

        <button class="btn btn-link" @onclick="GoHome">Return Home</button>

    </section>

    @code {

        void GoHome()

        {

            NavigationManager.NavigateTo("/");

        }

    }

We added a “Return Home” link and the click event code to  help the user get back to a known starting point.  We also added a css class to make the page more presentable.

Test the component 

The easiest way to test our new component is to just add the component to the index page:

    <Custom404 />

Once we are sure the component is working, we are ready for the next step.

Add component to the route information

Inside of App.razor, we add our 404 component

        <NotFound>

            <Custom404 />

        </NotFound>

We are not providing a layout for the page so it will take up the entire page.  We also added a link to the home page to route to a “BadPage” so we can test the 404 error.  You can see the  final result.

Summary

As you can see it is fairly quick and easy to build and configure your own 404 page in Blazor.

[Source Code]