[Solved] <Router> is not working as expected in Blazor 8 – Blazor

The Problem:

<Router> component in Blazor 8 Interactive Web Assembly is not functioning as expected. When navigating to unauthorized routes, a 401 error is encountered instead of displaying the dedicated <NotAuthorized> section. Additionally, accessing incorrect URLs doesn’t trigger the <NotFound> section. This issue arises when migrating a working Blazor 7 WASM app to Blazor 8 Interactive Web Assembly, specifically in the Server project’s Routes.razor component. The <Router> configuration remains the same, but it fails to behave as intended in Blazor 8.

The Solutions:

Solution 1: Handle 404 errors gracefully

In Blazor 8, custom 404 error pages are no longer supported. Instead, you can use the `UseStatusCodePagesWithReExecute` middleware to handle 404 errors gracefully. Add the following line to your `Startup.cs` file:

app.UseStatusCodePagesWithReExecute("/StatusCode/{0}");

This will create a new route that will handle 404 errors and redirect the user to a custom error page. You can then create a new Razor page for your error page, such as Pages/StatusCode.razor. The following code shows an example of a custom 404 error page:

@page "/StatusCode/{statusCode}"

<h1>Error {statusCode}</h1>

<p>Sorry, but we couldn't find the page you were looking for.</p>

<a href="/">Return to the home page</a>

With this change, Blazor 8 will use the custom error page to handle 404 errors, providing a better user experience.

Solution 2: Update `Program.cs` and create a new Razor component for the 404 error page.

Here’s a more detailed explanation of the steps to fix the issue with the `<Router>` component in Blazor 8:

1. Update Program.cs:

• In the Program.cs file, add the following line to configure the status code pages:

app.UseStatusCodePagesWithReExecute("/StatusCode/{0}");

This line tells the application to use the StatusCodePagesWithReExecute middleware to handle status code errors. It will automatically redirect the user to a specific page for each status code, such as "/StatusCode/404" for a 404 error.

2. Create a Razor component for the 404 error page:

• Navigate to the Components/Pages folder and create a new Razor component.

• Give it a suitable name, such as NotFound.razor.

• In the NotFound.razor file, add the following code:

@page "/StatusCode/404"

<PageTitle>Not Found</PageTitle>

<h3>Not Found</h3>

<p role="alert">Sorry, there's nothing at this address.</p>

@code { }

This Razor component will serve as the 404 error page for your application.

By following these steps, you can fix the issue with the <Router> component and ensure that the 404 error page is displayed correctly in Blazor 8.

Solution 3: The problem was in the `App.razor` file and the `<Router>` tag.

In Blazor 8, the `<Router>` tag should be placed inside the `<CascadingAuthenticationState>` component to ensure that authentication-related state is properly cascaded to child components.

Here is the corrected code for `App.razor`:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <h2>You are not authorized.</h2>
                    <h3>To log in click <a href="/Accounts/LogIn">here</a>.</h3>
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <CascadingAuthenticationState>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </CascadingAuthenticationState>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

This change ensures that the `<AuthorizeRouteView>` and `<NotFound>` components have access to the current authentication state, allowing them to display the appropriate content based on the user’s authorization status.

Video Explanation: