NavigationManager - Get current URL in a Blazor component

Question

I need to know the URL of the current page in order to check if I have to apply a certain style to an element. The code below is an example.

    @using Microsoft.AspNetCore.Blazor.Services
    @inject IUriHelper UriHelper
    @implements IDisposable

    <h1>@url</h1>
    <nav>
        <div class="nav-wrapper">
            <a href="#" class="brand-logo">Blazor</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li>
                    <NavLink href="/" Match=NavLinkMatch.All>
                        Home
                    </NavLink>
                </li>
                <li>
                    <NavLink href="/counter">
                        Counter
                    </NavLink>
                </li>
                <li>
                    <NavLink href="/fetchdata">
                        Fetch data
                    </NavLink>
                </li>
            </ul>
        </div>
    </nav>

    @functions {

        private string url = string.Empty;

        protected override void OnInit()
        {
            url = UriHelper.GetAbsoluteUri();
            UriHelper.OnLocationChanged += OnLocationChanged;
        }

        private void OnLocationChanged(object sender, LocationChangedEventArgs e)
        {
            url = newUriAbsolute;
        }

        public void Dispose()
        {
            UriHelper.OnLocationChanged -= OnLocationChanged;
        }
    }

I used the same approach used in the NavLink component in the Blazor repository, but it did not work. Any ideas?.

GetAbsoluteUri() works for me, what exactly is the problem?

Flores
– Flores

2018-04-30 15:45:20 +00:00
Commented Apr 30, 2018 at 15:45 — Flores
– Flores, Commented Apr 30, 2018 at 15:45

dani herrera · Accepted Answer · 2025-04-23 13:50:23Z

263

Use the Uri property from the NavigationManager class.

How it works

Get it from injection before using it on .razor pages:

@inject NavigationManager MyNavigationManager

Or like this in a .cs file if you prefer the "code-behind" experience:

using Microsoft.AspNetCore.Components;
// ...
[Inject]
public NavigationManager MyNavigationManager {get; set;} = default!;

Sample

@page "/navigate"
@inject NavigationManager MyNavigationManager

<h1>Current URL</h1>

<p>@(MyNavigationManager.Uri)</p>

More about navigation (NavigateTo, BaseUri, ToAbsoluteUri, ToBaseRelativePath, ... ) at: URI and navigation state helpers

NavigationManager cheatsheet

MyNavigationManager.Uri
#> https://localhost:5001/counter/3?q=hi

MyNavigationManager.BaseUri
#> https://localhost:5001/

MyNavigationManager.NavigateTo("http://new location")
#> Navigates to new location

MyNavigationManager.LocationChanged
#> An event that fires when the navigation location has changed.

MyNavigationManager.ToAbsoluteUri("pepe")
#> https://localhost:5001/pepe

MyNavigationManager.ToBaseRelativePath(MyNavigationManager.Uri)
#> counter/3?q=hi

// Create a new URI based on the current address
// with the specified query string parameter added or updated.
NavigationManager.GetUriWithQueryParameter("page", 3)
#> https://localhost:5001/counter/3?q=hi&page=3

Helper: GetQueryParm( "q" )
#> hi

(*1) Net6 introduces GetUriWithQueryParameter. More info: Manipulate the query string from Blazor

Helpers code:

@code {

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


    // Blazor: get query parm from the URL
    string GetQueryParm(string parmName)
    {
        var uriBuilder = new UriBuilder(MyNavigationManager.Uri);
        var q = System.Web.HttpUtility.ParseQueryString(uriBuilder.Query);
        return q[parmName] ?? "";
    }

}

edited Apr 23 at 13:50

answered Nov 23, 2018 at 14:15

dani herrera

52k11 gold badges133 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Henry Rodriguez Over a year ago

starting with v0.8.0 when using server side mode you should use: @inject Microsoft.AspNetCore.Components.Services.IUriHelper UriHelper and when using client-side mode: @inject Microsoft.AspNetCore.Blazor.Services.WebAssemblyUriHelper UriHelper

enet Over a year ago

@ Henry Rodriguez, no, you're wrong. The correct way is to inject IUriHelper, not the implementation..

Bcktr Over a year ago

It's not working if usert try to force to another page over the Url address

puerile Over a year ago

The cheatsheet is very helpful +1

mxmissile Over a year ago

Cheatsheet GetQueryParam only works with query parameters, how would you get route parameters?

|

Adrian Mole · Accepted Answer · 2022-05-27 14:40:32Z

15

First of all, inject NavigationManager into the component in which you need to get the current URL as below:

@inject NavigationManager NavManager

Now use the below line to get the current URL:

string Url = NavManager.Uri.ToString();

edited May 27, 2022 at 14:40

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered May 27, 2022 at 10:18

Jalpesh Nakum

2112 silver badges5 bronze badges

Comments

Flores · Accepted Answer · 2020-10-27 11:42:29Z

4

There is no use in connecting to the OnLocationChanged event in a page or component, as they get loaded and disposed on demand.

You should register to this event in app.cshtml as that won't be disposed.

edited Oct 27, 2020 at 11:42

answered Apr 30, 2018 at 15:43

Flores

8,9905 gold badges54 silver badges85 bronze badges

Comments

Steffen Cleveland · Accepted Answer · 2022-08-30 09:47:33Z

4

In my case I only needed the Uri of the page and not the base Uri aswell.

I keep all my code in a razor.cs file so I inject NavigationManager from code-behind like this:

[Inject] public NavigationManager Navigation { get; set; }

Navigation.Uri yeilds: https://localhost:5001/nail-square-singel-shear-timber-timber

So to get the page Uri just do like this:

Navigation.Uri.Replace(Navigation.BaseUri,"")

The above yields: nail-square-singel-shear-timber-timber

answered Aug 30, 2022 at 9:47

Steffen Cleveland

1011 silver badge5 bronze badges

1 Comment

T.Trassoudaine Over a year ago

This is the purpose of the method NavigationManager.ToBaseRelativePath(string uri).

Verbe · Accepted Answer · 2018-05-29 00:58:50Z

3

You should listen to a LocationChange of the IUriHelper, which triggers the function to do what you want for example:

@using Microsoft.AspNetCore.Blazor.Components
@using Microsoft.Extensions.Logging
@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
@inject ILogger<NavItem> logger

<li class="m-menu__item @(Active ? "m-menu__item--active" : "")">
    <a href=@Url class="m-menu__link ">
        <span class="m-menu__item-here"></span>
        <i class="m-menu__link-icon @Icon"></i>
        <span class="m-menu__link-text">@Text</span>
    </a>
</li>

@functions {
    protected override void OnInit()
    {
        UriHelper.OnLocationChanged += OnLocationChanges;
    }
    [Parameter]
    private string Url { get; set; }
    [Parameter]
    private string Icon { get; set; }
    [Parameter]
    private string Text { get; set; }
    private bool Active = false;
    private void OnLocationChanges(object sender, string newLocation)
    {
        bool active = newLocation.Contains(Url);
        if(active != Active) //Only re-render the components that need it
        {
            Active = active;
            StateHasChanged();
            logger.LogInformation("Location Change To:" + newLocation);
        }
    }
}

edited May 29, 2018 at 0:58

answered May 29, 2018 at 0:50

Verbe

7457 silver badges13 bronze badges

2 Comments

Enkode Over a year ago

This UriHelper.OnLocationChanged event has new parameters that were causing an error with this example with .netCore 3 preview6. Should be: private void OnLocationChanges(object sender, LocationChangedEventArgs e)

sowen Over a year ago

this answer was for an out-dated version of blazor, use NavigationManager now.

Alex Logvin · Accepted Answer · 2023-02-27 23:30:50Z

3

Create somewhere an extension method like this:

namespace YourSolution.YourProject
{
    public static class NavigationManagerExtention
    {
        public static string Page(this NavigationManager navigation)
        {
            return navigation.Uri.Substring(navigation.BaseUri.Length - 1);
        }
    }
}

and to get the page part of URL just call _nav.Page()

Examples:

For example.com/home it returns /home
For example.com/ it returns /

If you don't need a slash char (/) replace

return navigation.Uri.Substring(navigation.BaseUri.Length - 1);

with

return navigation.Uri.Substring(navigation.BaseUri.Length);

answered Feb 27, 2023 at 23:30

Alex Logvin

9211 gold badge12 silver badges15 bronze badges

Collectives™ on Stack Overflow

NavigationManager - Get current URL in a Blazor component

6 Answers 6

How it works

Sample

NavigationManager cheatsheet

6 Comments

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

How it works

Sample

NavigationManager cheatsheet

6 Comments

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related