Resolving pages programatically in NotFound Blazor Router instead using @page directive reload client

Question

I'm able to load pages dinamically using a CustomRouteLoader that is using as FragmentCode on a NotFound property of the Router tag in the App.razor file. This CustomRouteLoader use a CustomRouteService to get the Type of the razor component that must use as page to load for a not found URL path. (You can see the solution of MrC aka Shaun Curtis in this question: Register pages programatically in Blazor instead using @page directive using LazyAssemblyLoader)

The problem that seams to happends when the page is resolved from NotFound instead of be resolved by the Found in the Router. When a page contains @page "" works fine and the client is not reloaded, but when the page is resolved by NotFound Route way, the client is reload (it calls Program.cs code again).

To emulate this behavior with a more simple code I create a "WebAssembly of Blazor Application", cheking "Hosted ASP.NET Core" and "Progressive web application", and I do the next changes:

I added CustomRouteService.cs:

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;

namespace TestResolvePage.Client
{
    public class CustomRouteService
    {
        public CustomRouteService(IEnumerable pages)
        {
            _pages.AddRange(pages);
        }

        public bool IsReloaded { get; set; }

        private List _pages = new List();

        public IEnumerable Pages => _pages.AsEnumerable();

        public bool TryAddRoute(CustomRouteData data)
        {
            var isComponent = typeof(IComponent).IsAssignableFrom(data.Page);
            var newRoute = !_pages.Any(item => item.Route.Equals(data.Route, StringComparison.CurrentCultureIgnoreCase));

            if (isComponent && newRoute)
            {
                _pages.Add(data);
                return true;
            }

            return false;
        }

        public bool TryAddRoute(string route, string className)
        {
            var page = Type.GetType(className);
            if (page is null)
                return false;

            return this.TryAddRoute(new CustomRouteData(route, page));
        }

        public bool TryAddRoute(string route, string libraryName, string className)
        {
            var page = Type.GetType($"{className}, {libraryName}");
            if (page is null)
                return false;

            return this.TryAddRoute(new CustomRouteData(route, page));
        }

        public bool TryGetRoute(string route, out Type? page)
        {
            page = null;
            var data = _pages.FirstOrDefault(item => item.Route.Equals(route, StringComparison.CurrentCultureIgnoreCase));
            if (data is not null)
                page = data.Page;

            return page != null;
        }
    }

    public record CustomRouteData(string Route, Type Page);
}

I added CustomRouteLoader.razor:

@if (_isRoute)
{
    @*efaultLayout="@typeof(MainLayout)" />*@
}
else
{
    @this.NotFound
}


@code {
    [Parameter] public RenderFragment? NotFound { get; set; }

    [Inject] public NavigationManager NavManager { get; set; } = default!;
    [Inject] public CustomRouteService PageService { get; set; } = default!;

    //    private Type? _component;
    private bool _isRoute;
    private RouteData? _routeData;

    protected override void OnParametersSet()
    {
        _routeData = null;

        // Get rhe route Uri
        var url = this.NavManager.Uri.Replace(NavManager.BaseUri, "/");

        // Try to get the component associated with the route
        PageService.TryGetRoute(url, out Type? _component);

        // Check we have a type and it implements IComponent
        _isRoute = _component is not null && typeof(Microsoft.AspNetCore.Components.IComponent).IsAssignableFrom(_component);

        // Create the RouteData
        if (_isRoute && _component is not null)
            _routeData = new RouteData(_component, new Dictionary());
    }

}

I modified Program.cs adding next lines before await builder.Build().RunAsync();:

CustomRouteService routeService = new CustomRouteService(new List { new CustomRouteData("/page-with-no-attribute", typeof(TestResolvePage.Client.Pages.PageWithNoAttribute)) });
builder.Services.AddSingleton(sp => routeService);
routeService.IsReloaded = true;

I changed App.razor like this (noticed that I remove both Layouts):


    
        @* DefaultLayout="@typeof(MainLayout)"/>*@
        
    
    
        
            
                Not found
                @*Layout="@typeof(MainLayout)"/>*@
                    Sorry, there's nothing at this address.

I changed Counter.razor, FetchData.razor and Index.razor to add the next line:

@layout MainLayout

I added into Pages folder PageWithAttribute.razor:

@page "/page-with-attribute"

@inject TestResolvePage.Client.CustomRouteService CustomRouteService

Example of a Page with an Attribute @@page

Example of a Page with an Attribute @@page


    @if (CustomRouteService.IsReloaded)
    {
        @("The singleton class was reloaded because the page is recharged like if I press F5 in the browser(the Program.cs is executed again before arreive here)")
    }
    else
    {
        @("The singleton class was the same because the page is not recharged(the Program.cs is executed again before arreive here)")
    }

I added into Pages folder PageWithNoAttribute.razor:

@inject TestResolvePage.Client.CustomRouteService CustomRouteService

Example of a Page with no Attribute @@page

Example of a Page with no Attribute @@page


    @if (CustomRouteService.IsReloaded)
    {
        @("The singleton class was reloaded because the page is recharged like if I press F5 in the browser(the Program.cs is executed again before arreive here)")
    }
    else
    {
        @("The singleton class was the same because the page is not recharged(the Program.cs is executed again before arreive here)")
    }

And finally I added 2 entries into the NavMenu.razor:


    
         Page with Atribute
    


    
         Page with No Atribute

EDIT: I continue doing tests found somthing strange behavior.

TEST 1: I resotre the App.razor to the original value for NotFound section:


    
        
        
    
    
        Not found
        
            Sorry, there's nothing at this address.

and I browse to a page path that not exits, and then I can see that the Loading page is showed a short time but the code of Program.cs is not called.

TEST 2: I move the code of the "original" NotFound section of the App.razor to a new file PageLikeAppNotFoundSection.razor and I refer this new file in the NotFoundSection of App.razor.

The PageLikeAppNotFoundSection.razor file:

Not found

    Sorry, there's nothing at this address.

The App.razor file:

This code do that loading page were showed and the code of Program.cs is called.

Why is this?

EDIT 2: If I add an buton and I call in the onclick event to the NavigateTo of the NavigationManager in order to go to the same page, the behavior now is different, it works like I expected without reloading the cliente and no calling the code of Program.cs:


    
         Page with No Atribute
    


...
@code {
    ...
    private void NavigateToTheSamePage()
    {
        navManager.NavigateTo("/page-with-no-attribute");
    }
    ...
}

Resolving pages programatically in NotFound Blazor Router instead using @page directive reload client

Answers (1)

Related Questions