Изменение маршрутизации по умолчанию в приложении Blazor Hybrid

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

Поведение маршрутизации запроса URI по умолчанию

По умолчанию, ссылка считается внутренней, если имя хоста и схема совпадают между исходным URI приложения и URI запроса. Например, в приложении Blazor Hybrid все внутренние ссылки выглядят следующим образом: https://0.0.0.1/[path]. Такие ссылки открываются в компоненте BlazorWebView

Если внутренняя ссылка указывает на файл, то в .NET MAUI Blazor Hybrid мы получим ошибку 404 Not Found

Если имя хоста или схемы не совпадают или если ссылка содержит атрибут target="_blank", то она считается внешней. Все внешние ссылки по умолчанию открываются во внешнем приложении (браузере).

Например, создадим новое приложение Blazor Hybrid и добавим новую ссылку в меню NavMenu:

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        
        //здесь прочие ссылки меню

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="http://ya.ru">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Yandex
            </NavLink>
        </div>
    </nav>
</div>

Запустите приложение и перейдите по новой ссылке — вы увидите, что она откроется в браузере по умолчанию так как ссылка является внешней. Изменим поведение маршрутизации по умолчанию.

Изменение поведения маршрутизации по умолчанию

Для загрузки компонентов Razor в приложении Blazor Hybrid используется специальный компонент BlazorWebView. Этот же компонент мы можем использовать и для открытия внешних ссылок в приложении.

Для того, чтобы открывать внешние ссылки в компоненте BlazorWebView мы должны назначить компоненту обработчик события UrlLoading в котором указать стратегию работы с внешними ссылками. Для приложений .NET MAUI Blazor Hybrid компонент создается в MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BlazorNavi"
             x:Class="BlazorNavi.MainPage">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

Следовательно, здесь же мы и должны назначить обработчик события. Откроем файл MainPage.xaml.cs и изменим его следующим образом:

using Microsoft.AspNetCore.Components.WebView;
namespace BlazorNavi
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            blazorWebView.UrlLoading += (s, e) => 
            {
                e.UrlLoadingStrategy = UrlLoadingStrategy.OpenInWebView;
            };
        }
    }
}

здесь перечисление UrlLoadingStrategy может принимать следующие значения:

Таким образом, мы указали, что внешние ссылки должны загружаться непосредственно внутри нашего приложения. Запустим приложение и проверим поведение:

Аналогичным образом мы можем менять поведение при открытии ссылок, например, в зависимости от имени хоста или запрещать загрузку определенных URL в нашем приложении.

Итого

В приложениях Blazor Hybrid внешние ссылки по умолчанию открываются в браузере. При необходимости, мы можем поменять поведение нашего приложения при работе с внешними ссылками, зарегистрировав обработчик события UrlLoading у компонента BlazorWebView.