Blazor University (27) routing - detect navigation events

Link to the original text ：https://blazor-university.com/routing/detecting-navigation-events/

Detect navigation events

Source code ^[1]

from Blazor Access to browser navigation is through NavigationManager service-provided . This can be used razor In the document @inject or CS In the document [Inject] Attribute injection into Blazor In the component .

LocationChanged event

LocationChanged Is in the browser URL Event triggered when a change occurs . It passes a LocationChangedEventArgs example , This example provides the following information ：

public readonly struct LocationChangedEventArgs
{
  public string Location { get; }
  public bool IsNavigationIntercepted { get; }
}

Location Property is the complete... That is displayed in the browser URL, Including the agreement 、 Path and any query string .

IsNavigationIntercepted Indicates whether navigation is through code or through HTML Navigation is activated .

• false

  Navigation is called from code NavigationManager.NavigateTo start-up .

• true

  The user clicks HTML Navigation elements （ for example a href）,Blazor Intercept navigation , Instead of allowing the browser to actually navigate to the new URL, This will result in a request to the server . The same is true in other cases , For example, some on the page JavaScript Cause navigation （ for example , After timeout ）. Final , Anything that is not through NavigationManager.NavigateTo All navigation events initiated will be regarded as intercepting navigation , And the value is true.

Please note that , Navigation cannot be blocked and prevented from continuing at this time .

Observe OnLocationChanged event

It should be noted that ,NavigationManager Service is a long-standing instance . therefore , Any subscription to its LocationChanged The components of events will be strongly referenced throughout the service life cycle . therefore , It is important that our components unsubscribe from this event when they are destroyed , Otherwise they will not be garbage collected .

at present ,ComponentBase Class has no lifecycle events when it is destroyed , But it can be done IDisposable Interface .

@implement IDisposable
@inject NavigationManager NavigationManager

protected override void OnInitialized()
{
  // Subscribe to the event
  NavigationManager.LocationChanged += LocationChanged;
  base.OnInitialized();
}

void LocationChanged(object sender, LocationChangedEventArgs e)
{
  string navigationMethod = e.IsNavigationIntercepted ? "HTML" : "code";
  System.Diagnostics.Debug.WriteLine($"Notified of navigation via {navigationMethod} to {e.Location}");
}

void IDisposable.Dispose()
{
  // Unsubscribe from the event when our component is disposed
  NavigationManager.LocationChanged -= LocationChanged;
}

Reference material

[1]

Source code : https://github.com/mrpmorris/blazor-university/tree/master/src/Routing/NavigatingViaCode