[SOLVED] NavigationManager not navigating to a page if the url is the same exept the last part: "/{variable}"

NavigationManager not navigating to a page if the url is the same exept the last part: "/{variable}"

I am building a .NET 6 MAUI Blazor application. The application has a top nav that lets the user go to their profile from wherever in the application he may be in that moment.

Using navigation manager like so: navManager.NavigateTo($"/Profile/{loggedInUser.Username}"); works in all cases except one, if the user is currently on someone elses profile, the navigation manager does nothing.

I believe that is because both the current and the page it's trying to go to are essentially the same page Profile.razor and the only difference is the username part of the URL /Profile/{username}, with which the app knows witch users data to load onto the page.

I have worked around it like so

navManager.NavigateTo("/");
navManager.NavigateTo($"/Profile/{loggedInUser.Username}");

By navigating to another page first then back to the profile page the navigation is successful.

Currently this does not pose an issue for me since the Index.razor page does not display any data from the database and loads instantly so the transition is non noticeable. But in the future the Index page will be the one that loads the most data and this way of working around the problem would not be a good one since the user will see the Index page loading first. Also there won't be a page that does not require any data to be loaded so I won't be able to just set it to run through some other page instantly like I was doing here.

If I use the forceLoad option of Navigation Manager like so navManager.NavigateTo($"/Profile/{loggedInUser.Username}", true); I just get an error saying:

Hmmm… can't reach this page. It looks like the webpage at https://0.0.0.0/Profile/username might be having issues, or it may have moved permanently to a new web address.

In the OnInitializedAsync() function on the profile page I can't catch it entering the page at all with a breakpoint.

The top nav is a Razor component on it's own loaded always in the MainLayout.razor

<div class="page @DarkTheme()">
    <TopNav/>
    <main>
        <article>
            @Body
        </article>
    </main>
    <BottomNav/>
</div>

It's not a div on top of the Profile page where I would be able to just write a different function so it just reloads the page and get the data of the logged in user by setting that id as the requested one. Also I do not know a way of finding out what page is loaded in the body inside of the TopNav.razor so I could try to do the same id swap.

English is not my first language, and this is my first question posted on here but I hope I described the problem well enough for people to understand. If you need more information or have any questions I would be more then glad to fill you in.

Solution

If you navigate to the same page you are only updating the component as you surmised.

OnInitialized{Async} doesn't run again, but OnParametersSet{Async} does. You need to write code in the OnParametersSet{Async} to detect if the parameter you are interested in has changed and then take the appropriate action.