BlazorJuniorCoding

В чём разница между NavigationManager.NavigateTo() и компонентом <NavLink>?

NavLink — декларативный компонент-ссылка с автоматической подсветкой активного маршрута для меню. NavigationManager.NavigateTo() — программная навигация из C#-кода, нужна после async-операций, редиректов и условных переходов.

NavigationManager.NavigateTo() и компонент NavLink

Оба инструмента обеспечивают навигацию в Blazor, но решают разные задачи и используются в разных контекстах.

NavLink — декларативная навигация в разметке

NavLink — это компонент Blazor, который рендерится как тег <a>, но дополнительно автоматически добавляет CSS-класс active, если текущий URL совпадает с атрибутом href. Это удобно для навигационных меню.

<nav>
    <NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
    <NavLink href="/jobs" Match="NavLinkMatch.Prefix">Jobs</NavLink>
    <NavLink href="/profile">Profile</NavLink>
</nav>

Параметр Match:

  • NavLinkMatch.Prefix (по умолчанию) — активен при любом URL, начинающемся с href.
  • NavLinkMatch.All — активен только при точном совпадении. Обязательно для href="/", иначе «Home» будет всегда активен.

NavigationManager.NavigateTo() — императивная навигация в коде

NavigationManager — сервис, доступный через DI. Используется когда переход нужно выполнить программно: после отправки формы, по результату async-операции, при ошибке авторизации и т.д.

@inject NavigationManager Nav

private async Task HandleSubmit()
{
    var result = await ApiService.SaveAsync(model);
    if (result.Success)
    {
        // Обычная клиентская навигация
        Nav.NavigateTo($"/jobs/{result.Id}");
    }
}

// Принудительная перезагрузка страницы с сервера
Nav.NavigateTo("/maintenance", forceLoad: true);

// Замена текущей записи в истории (не добавляет новую запись)
Nav.NavigateTo("/profile", replace: true);

Другие возможности NavigationManager

// Текущий абсолютный URL
string currentUrl = Nav.Uri;

// Получить базовый путь приложения
string baseUri = Nav.BaseUri;

// Подписаться на смену URL (например, для аналитики)
Nav.LocationChanged += (sender, args) =>
{
    Console.WriteLine($"Navigated to: {args.Location}");
};

Когда что выбрать

  • Навигационное меню, хлебные крошки — NavLink.
  • Переход после действия пользователя (сохранение, логин, удаление) — NavigationManager.NavigateTo().
  • Редирект при ошибке авторизации в middleware — NavigationManager.NavigateTo().
  • Ссылка в тексте без подсветки активного состояния — обычный <a href="...">.

Подводные камни

  • NavLinkMatch.Prefix на корне. <NavLink href="/"> без Match="NavLinkMatch.All" будет активен на всех страницах.
  • NavigateTo в OnInitializedAsync. Вызов навигации до завершения рендеринга может вызвать исключение в Blazor Server. Лучше делать в OnAfterRenderAsync или через Guard в компоненте.
  • forceLoad=true делает полный HTTP-запрос. Это полная перезагрузка страницы, теряется состояние SPA. Используйте только когда действительно нужен reload.
  • replace=true и история браузера. Заменяет текущую запись в history — кнопка «назад» пропустит текущую страницу. Используйте осознанно.
  • Относительные vs абсолютные пути. NavigateTo ожидает путь относительно base href. При вложенных развёртываниях (subfolder) лучше использовать Nav.BaseUri.
  • NavLink и fragment (#). NavLink не сравнивает anchor-часть URL при определении активного состояния.

Common mistakes

  • Путать NavigationManager и NavLink как программная и декларативная навигация с похожим механизмом из другой версии или платформы.
  • Игнорировать runtime-границы Blazor: lifecycle, DI scope, SQL translation, UI thread или platform API.
  • Не обсуждать null/empty/error cases и поведение под нагрузкой.

What the interviewer is testing

  • Кандидат объясняет NavigationManager и NavLink как программная и декларативная навигация на конкретном примере, а не только определением.
  • Указывает последствия для производительности, тестируемости и поддержки.
  • Различает документированное поведение текущего стека и устаревшие практики.

Sources

Related topics