Blazor Server: Custom 404 component causes RenderFragment<T> error with InteractiveServer render mode

Question

I'm trying to use a custom 404 component in a Blazor Server app with this router setup:

<Router AppAssembly="@typeof(App).Assembly" @rendermode="InteractiveServer">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <NotFoundComponent />
        </LayoutView>
    </NotFound>
</Router>

However, when I run the app, I get the following error:

An unhandled exception occurred while processing the request.
InvalidOperationException: Cannot pass RenderFragment<T> parameter 'Found' to component 'Router' with rendermode 'InteractiveServerRenderMode'. Templated content can't be passed across a rendermode boundary, because it is arbitrary code and cannot be serialized.

Microsoft.AspNetCore.Components.Endpoints.SSRRenderModeBoundary.ValidateParameters(IReadOnlyDictionary<string, object> latestParameters)

It seems like the @rendermode="InteractiveServer" is causing the Found template to fail. I want to display a custom 404 component, but it doesn't work with this global render mode.

Question:

How can I use a custom 404 component (NotFoundComponent) in a Blazor Server app without getting the RenderFragment<T> serialization error? Is there a different approach for defining the router or render mode that supports custom templates?

Note: working in .net9.0

What version are you on ans on what version did you start the project? — Henk Holterman
– Henk Holterman, Commented Aug 22 at 10:58
@HenkHolterman, forgot to mention, but I'm working in .net9.0. — SDG6
– SDG6, Commented Aug 22 at 11:08

Henk Holterman · Accepted Answer · 2025-08-22 11:11:34Z

0

For global interactivity, just move the @rendermode="InteractiveServer" from Routes.razor to App.razor, as in <Routes @rendermode="InteractiveServer" />.

This will resolve the RenderFragment error.
But I'm not sure that the <NotFound> part still works in this setup.

See this issue on GitHub.

edited Aug 22 at 11:11

answered Aug 22 at 11:03

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SDG6 Aug 22 at 11:08

The <NotFound> does not work with Routes...

Henk Holterman Aug 22 at 11:11

No, it doesn't. I've added a link.

SDG6 Aug 22 at 11:17

Seems to be fixed in .net10, but is there any way to fix this in .net9?

Henk Holterman Aug 22 at 11:20

As the article says, you will need a fallback route. I'm not sure how, maybe take look at a pre-8 project for the details.

SDG6 Aug 22 at 11:32

Yes, fixed it with app.UseStatusCodePagesWithRedirects("/error-page/{0}");

SDG6 · Accepted Answer · 2025-08-22 11:32:03Z

0

I've fixed with the following:

Added app.UseStatusCodePagesWithRedirects("/error-page/{0}"); to the Program.cs.

Added the page CustomErrorPage.razor with the following content:

@page "/error-page/{StatusCode:int}"

<div>content</div>

@code {
    [Parameter]
    public int StatusCode { get; set; }

    public bool Is404 => StatusCode == 404;
    public string Heading => Is404 ? "Page not found 404" : $"Error {StatusCode}";
}

answered Aug 22 at 11:32

SDG6

1031 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Blazor Server: Custom 404 component causes RenderFragment<T> error with InteractiveServer render mode

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related