Блог

Главная - Вопросы по программированию - Навигационный менеджер Blazor.Навигация для изменения URL-адреса, но не загружает страницу

Навигационный менеджер Blazor.Навигация для изменения URL-адреса, но не загружает страницу

#navigation #blazor #blazor-webassembly

Вопрос:

Я пытаюсь изменить страницу в меню навигации. Я нажимаю на кнопку в меню навигации. Вызывается обработчик события OnClick. Он выполняется NavigationManager.NavigateTo("/target") . В браузере URL-адрес изменяется на http://baseaddress/target как и ожидалось. Но целевая страница не отображается. Содержимое текущей страницы остается. Это не ожидаемое поведение, не так ли? Мне известен второй параметр с именем forceLoad. Но я не хочу полностью перезагружать страницу с сервера. Я хочу, чтобы навигация происходила на стороне клиента. Что я делаю не так?

Комментарии:

1. В какой @page директиве есть компонент, который должен быть доступен по адресу /target . Какая @page директива имеет текущий компонент? Одна из причин, по которой эта навигация «терпит неудачу», может заключаться в том, что обе ссылки указывают на одно и то же — текущий компонент.

2. Директива целевой страницы такова @page "/target" . В настоящее время у @page "/" них нет того же самого. Кроме того, когда я напрямую ввожу базовый адрес/цель в браузере, он идет туда, куда должен. Но это похоже на forceLoad = верно

3. Кажется необычным, что это не работает. Я пока не могу точно определить это; я могу предложить дальнейшую диагностику. Есть ли у вас какие-либо выходные данные в окне вывода или консоли в браузере? В вашем /target компоненте вы можете проверить, что, например OnInitilized , вызывается крюк жизненного цикла? В навигационном менеджере есть событие LocationChanged , это событие запущено? Существует ли сторонняя библиотека js, которая вмешивается в API истории HTML5?

4. Действительно. Нет, при использовании NavigationManager вообще не создается никаких дополнительных выходных данных. OnInitialized не вызывается на /target компоненте. Но LocationChanged событие увольняется. IsNavigationIntercepted имеет значение false и Location содержит правильный URL-адрес. Я не использую сторонние js. Единственная сторонняя библиотека, которую я использую, — это bootstrap

Ответ №1:

Во-первых, настройте компонент с @page помощью директивы.

Во-вторых, используйте <NavLink> для навигации вместо того, чтобы справляться onclick самостоятельно.

Дополнительные сведения см. в разделе Школьная маршрутизация и навигация Blazor.

Комментарии:

1. <NavLink> В компоненте Wie сохраняется та же проблема. URL — адрес в браузере задан правильно, но страница не загружается

Ответ №2:

Я нашел проблему, и это была моя собственная ошибка. Я поместил @Body тег в mainLayout.razor не непосредственно в его собственный html, а скорее в дочерний контент других компонентов razor

 <div id="rootContainer">
    <ContainerComponent>
        <Content>
            <MainMenu />
            <div id="rootContentContainer">
                   @Body
            </div>
        </Content>
    </MessageBoxContainer>
</div>
Метки: ,