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 как программная и декларативная навигация на конкретном примере, а не только определением.
- Указывает последствия для производительности, тестируемости и поддержки.
- Различает документированное поведение текущего стека и устаревшие практики.