BLAZOR ROUTE PARAMETER EXCEPTION

Question

Current page directive of Blazor component is like:

@page /mypage/{thestate:bool?}

When I call the URL localhost:32360/mypage, there is no problem; nevertheless, when I call the URL localhost:32360/mypage/false or localhost:32360/mypage/true, the web browser prints that error report to its console:

Blazor Server, in addition, does not respond user interactions in the page after the exception occurs.

Answer 1

As far as I can tell, the issue is not with Blazor Server itself, but with how the route parameter is defined and bound. In Blazor, route templates should be enclosed in quotes, and the route parameter must match a [Parameter] property on the component with a compatible type. If either of these is wrong, Blazor throws a routing exception, which breaks the server circuit and causes the UI to stop responding.

Your directive is missing quotes, so the route constraint is not parsed correctly. It should be written as a string literal.

@page "/mypage/{thestate:bool?}"

In addition, the component must declare a matching parameter. Because the route allows the value to be optional (bool?), the property must also be nullable.

@code {
    [Parameter]
    public bool? thestate { get; set; }
}

With this setup:

/mypage → thestate == null

/mypage/true → thestate == true

/mypage/false → thestate == false

If the parameter type is non-nullable (bool) while the route allows it to be optional, or if the route syntax is invalid, Blazor throws an exception during routing. In Blazor Server, any unhandled exception during rendering terminates the circuit, which is why user interactions stop working afterward.

---

If the above response helps answer your question, remember to "Accept Answer" so that others in the community facing similar issues can easily find the solution. Your contribution is highly appreciated.

hth

Marcin

Answer 2

The 'Unexpected token' error usually indicates that your code is receiving an HTML response (likely an error page) when it expects JSON. This is definitely unusual behavior in a Blazor Server application, especially since we are just dealing with route parameters.

Since the snippet provided contains syntax errors, it is difficult to troubleshoot the specific logic. I have created a working example below that uses an optional Boolean route parameter. Please compare this to your implementation. If you are still having trouble, please update your post with a minimal code sample that reproduces the issue so we can help further.

Blazor Component:

@page "/status/{IsActive:bool?}"

<h3>Modern Optional Status</h3>

<div class="card">
    <div class="card-body">

        @if (IsActive is null)
        {
            <div class="alert alert-warning">
                No status in URL (IsActive is null)
            </div>
        }
        else if (IsActive == true)
        {
            <div class="alert alert-success">
                Active (True)
            </div>
        }
        else
        {
            <div class="alert alert-danger">
                Inactive (False)
            </div>
        }

    </div>
</div>

@code {
    // ⚠️ IMPORTANT: The property type MUST be nullable (bool?)
    // to match the optional route parameter.
    [Parameter]
    public bool? IsActive { get; set; }
}

For testing purposes I added navigation links to the NavMenu.razor in a standard Blazor Server template.

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="status/true">
                <span class="oi oi-check" aria-hidden="true"></span> Status True
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="status/false">
                <span class="oi oi-x" aria-hidden="true"></span> Status False
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="status">
                <span class="oi oi-x" aria-hidden="true"></span> No Status
            </NavLink>
        </div>