Blazor server page with parameters throwing "404 not found " on manual refreshes

Question

I have a Blazor Server app with a page that takes in parameters in the uri. When I click on an anchor tag that has the route setup to hit that page with params (like below) the link works fine, and the page loads.

<a href="/MyPage/{@Param1}/{@Param2}"> <!--link content in here--> </a>

However, if one tries to access the page from that url directly, or manually refreshes in the browser, then the page doesn't reinitialize or hit any breakpoints on the parameters. Instead, it throws a 404 not found.

So two things here:

• Firstly, I'm confused about why it works fine from within the anchor tag, but dies any other way. Especially when pages without params in the @page directive work fine with refreshes/direct-urls.
• Second, is this an intended behavior for Blazor Server or am I missing something here that's breaking the page refreshes/hitting-url-directly? Doesn't seem like a feature, but maybe I'm misunderstanding Blazor's routing.

Razor and Razor.cs for page in question:

@page "/MyPage/{Param1}/{Param2}"

<h1>MyPage</h1>

<Metrics Param1="@Param1" />

<Details Param1="@Param1" Param2="@Param2" />

<InProgress Param1="@Param1" Param2="@Param2" />

<InQueue Param1="@Param1" />

<br />

using System;
using System.Linq;
using System.Threading.Tasks;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
using MyApp.Data.Models.ApiResponse;

namespace MyApp.Pages
{
    public partial class MyPage
    {
        [Parameter]
        public string Param1 { get; set; }

        [Parameter]
        public string Param2{ get; set; }

        public TaskList Tasks { get; set; }

        protected override Task OnInitializedAsync()
        {
            // work in progress, intend to do more here later on
            var test = "";
            return base.OnInitializedAsync();
        }
    }
}

Edit(s) -- per comment suggestions

UseEndpoints section of Configure method in Startup.cs:

 app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });

After further digging I noticed that the @param2 will occaionally have a . char in it. Blazor does have a need for configuring routes that have params with dots in them. The below fall back doesn't work:

endpoints.MapFallbackToPage("/MyPage/{Param1}/{Param2}", "/MyPage");

It throws an: InvalidOperationException: Cannot find the fallback endpoint specified by route values: { page: /MyPage, area: }.

I'm guessing that the area: being empty is a problem but I'm not finding how or where to properly set that. The example from the link shows just the Page's name in the fallback. Could someone please point out what's wrong with this fall back and how one can properly correct it?

Answer 1

My problem was with a dot character being in the parameter's value. When the routing issue is from a "dot" being in the parameter, then doing exactly what the docs recommends does the trick (go figure). You will want to specify a fall back for that particular route like so:

endpoints.MapFallbackToPage("/MyPage/{Param1}/{Param2}", "/_Host");

For WASM projects: you want to specify the html file vs _Host which should be Blazor Server specific.

endpoints.MapFallbackToFile("/MyPage/{Param1}/{Param2}", "index.html");

After this setup is applied, refreshing a page or reaching the URL directly should result in your application working as intended, no more 404 error different from the standard <NotFound> tag setup in the App.razor.

Key points:

• Check if your url parameters have any known parsing exceptions like dots (Blazor assumes those are files being requested)
• Use the default page of your application for the fall back, not the page you want to hit. In a Server app that's _Host for wasm it's index.html