Blazor: Implementing 404 not found page

Question

I'd like to implement a page internal to my application that appears when the blazor router is unable to find a matching route. Currently, all requests are routing to index.html so I'm unable to handle errors through iis as I may normally. If I enter an invalid route, I will be shown a blank page (which is actually index.html) and receive a console error:

'Router' cannot find any component with a route for '/some/Nonexistent/Route'.

It seems like I should be able to handle this since the blazor router is able to recognize that there is no route defined which matches the requested route however I've so far been unable to find any documentation on this.

How can I implement this? Is there a way to hook into the blazor router and direct all non found routes to a predefined error route?

I see https://github.com/aspnet/AspNetCore/issues/5489 has an issue listed for a 404 handler however I'm not sure if that is for something more robust and production ready than what I'm looking to do

Answer 1

Try this: App.cshtml

<Router AppAssembly=typeof(Program).Assembly FallbackComponent="typeof(Error404)" >

Create a Component named Error404.cshtml

Note: This is only a guess I gathered from digging the Router class. See https://github.com/aspnet/AspNetCore/blob/343208331d9ebbb3a67880133f4139bee2cb1c71/src/Components/src/Microsoft.AspNetCore.Components/Routing/Router.cs

Please, let me know if it works for you.

Answer 2

In App.razor, add the <NotFound> element under <Router>and set what content you'd like to be displayed when Blazor can't find the specified route.

For example:

<Router AppAssembly="typeof(Program).Assembly">
    <NotFound>
        <h1>404 Not Found</h1>
    </NotFound>
</Router>

(Note: If it's a server side app, then it would be typeof(Startup).Assembly)

Edit: Changed <NotFoundContent> to <NotFound>

Source