CODEWITHSUNDEEP
asp.net-core.net-core.net-core-2.0blazor
GregH
GregH

Reputation: 5459

Blazor: Implementing 404 not found page

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

Upvotes: 10

Views: 24719

Answers (6)

Shervin Ivari
Shervin Ivari

Reputation: 2501

If you are using Blazor server-side rendering(SSR) and none of these methods is not working try the following code. Create Blazor component

@page "/{*Path:nonfile}"

<h3>404 - Page not found</h3>
 Route: @Path

@code {
  [Parameter]
  public string Path { get; set; }
}

Upvotes: 0

ssp
ssp

Reputation: 1710

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)

Source

Upvotes: 11

Dani
Dani

Reputation: 2036

Program:

app.UseStatusCodePagesWithRedirects("/404");

app.Run();

Add a _404.razor page to your Pages folder:

@page "/404"
<h3>Show me 404</h3>
@code {
    
}

Upvotes: 4

Степан
Степан

Reputation: 31

For SEO enough add in App.razor:

<NotFound>
        <h1>404 Not Found</h1>
        <HeadContent>
               <meta name="robots" content="noindex" />
        </HeadContent>
</NotFound>

and implement Sitemap.xml

Upvotes: 3

Ergin &#199;elik
Ergin &#199;elik

Reputation: 775

You can use this link for .net 5.0 blazor server-side application. You can handle 404 and status code correct

https://stackoverflow.com/a/69404900/2123797

Upvotes: 0

enet
enet

Reputation: 45626

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.

Upvotes: 6

Related Questions