Verwenden der Blazor-Routerkomponente zum Steuern der Navigation Ihrer App

Das Routingsystem von Blazor bietet flexible Optionen, mit denen sichergestellt werden kann, dass Benutzeranforderungen eine Komponente erreichen, die sie verarbeiten und Informationen zurückgeben kann, die der Benutzer wünscht.

Angenommen, Sie arbeiten auf der Website des Pizzalieferdiensts. Die Website soll so eingerichtet werden, dass Anforderungen für Pizzadetails und benutzerdefinierte Beläge von derselben Komponente verarbeitet werden. Sie haben diese Phase abgeschlossen, aber Ihre Tests ergeben, dass bei Anforderungen für Beläge Fehlermeldungen auftreten. Sie müssen dieses Problem beheben.

Hier erfahren Sie, wie Sie Routen in Blazor mithilfe der @page-Anweisung konfigurieren.

Verwenden von Routenvorlagen

Wenn der Benutzer eine Seite aus Ihrer Web-App anfordert, kann er im URI angeben, was er mit Informationen anzeigen möchte. Beispiel:

http://www.contoso.com/pizzas/margherita?extratopping=pineapple

Nach dem Protokoll und der Websiteadresse gibt dieser URI an, dass der Benutzer mehr über Pizza Margherita wissen möchte. Darüber hinaus geht aus der Abfragezeichenfolge nach dem Fragezeichen hervor, dass er oder sie an einem zusätzlichen Belag (Ananas) interessiert ist. In Blazor verwenden Sie Routing, um sicherzustellen, dass jede Anforderung an die Komponente gesendet wird, die am besten antworten kann. Sie verwenden das Routing auch, um sicherzustellen, dass die Komponente über alle Informationen verfügt, die sie benötigt, um anzuzeigen, was der Benutzer wünscht. In diesem Fall soll die Anforderung an die Komponente Pizzas gesendet werden. Außerdem soll diese Komponente eine Pizza Margherita mit zusätzlichen Informationen zum Hinzufügen von Ananas anzeigen.

Blazor leitet Anforderungen mit einer spezialisierten Komponente weiter, die als Routerkomponente bezeichnet wird. Die Komponente wird in App.razor wie folgt konfiguriert:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, we haven't found any pizzas here.</p>
    </NotFound>
</Router>

Wenn die App gestartet wird, überprüft Blazor das AppAssembly-Attribut, um herauszufinden, welche Assembly überprüft werden soll. Diese Assembly wird auf Komponenten überprüft, für die das RouteAttribute vorhanden ist. Mit diesen Werten kompiliert Blazor ein RouteData-Objekt, das angibt, wie Anforderungen an Komponenten weitergeleitet werden. Wenn Sie die App codieren, verwenden Sie die @page-Anweisung in jeder Komponente, um das routeAttribute zu fixieren.

Im obigen Code gibt das Tag <Found> die Komponente an, die das Routing zur Laufzeit verarbeitet: RouteView. Diese Komponente empfängt das RouteData-Objekt und alle Parameter aus dem URI oder der Abfragezeichenfolge. Anschließend werden die angegebene Komponente und ihr Layout gerendert. Sie können das <Found>-Tag verwenden, um ein Standardlayout anzugeben, das verwendet wird, wenn die ausgewählte Komponente kein Layout mit der @layout-Anweisung angibt. Weitere Informationen zu Layouts erhalten Sie später in diesem Modul.

In der <Router>-Komponente können Sie auch angeben, was an den Benutzer zurückgegeben wird, wenn keine übereinstimmende Route vorhanden ist, indem Sie das <NotFound>-Tag verwenden. Im vorherigen Beispiel wird ein einzelner <p>-Absatz zurückgegeben. Es ist jedoch möglich, komplexeren HTML-Code zu rendern. Beispielsweise könnte ein Link zur Startseite oder eine Kontaktseite für Websiteadministrator*innen enthalten sein.

Verwenden der @page-Anweisung

In einer Blazor-Komponente gibt die @page-Anweisung an, dass die Komponente Anforderungen direkt verarbeiten soll. Sie können ein RouteAttribute in der @page-Anweisung angeben, indem Sie es als Zeichenfolge übergeben. Dieses Attribut gibt beispielsweise an, dass die Seite Anforderungen an die Route /Pizzas verarbeitet:

@page "/Pizzas"

Wenn Sie mehrere Routen zur Komponente angeben möchten, verwenden Sie wie in diesem Beispiel mindestens zwei @page-Anweisungen:

@page "/Pizzas"
@page "/CustomPizzas"

Abrufen von Speicherortinformationen und Navigieren mit NavigationManager

Nehmen Sie an, dass Sie eine Komponente zur Verarbeitung eines URI schreiben, den Benutzer anfordern, beispielsweise http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.

Wenn Sie eine Komponente schreiben, benötigen Sie möglicherweise Zugriff auf Navigationsinformationen wie:

• Den aktuellen vollständigen URI, z. B. http://www.contoso.com/pizzas/margherita?extratopping=pineapple
• Den Basis-URI, z. B. http://www.contoso.com/
• Den relativen Basispfad, z. B. pizzas/margherita
• Die Abfragezeichenfolge, z. B. ?extratopping=pineapple

Sie können ein NavigationManager-Objekt verwenden, um alle diese Werte abzurufen. Sie müssen das Objekt in die Komponente einfügen, dann können Sie auf dessen Eigenschaften zugreifen. Dieser Code verwendet NavigationManager, um den Basis-URI der Website abzurufen. Dieser wird dann verwendet, um einen Link zur Homepage festzulegen:

@page "/pizzas"
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<a href=@HomePageURI>Home Page</a>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    public string HomePageURI { get; set; }
    
    protected override void OnInitialized()
    {
        HomePageURI = NavManager.BaseUri;
    }
}

Um auf die Abfragezeichenfolge zuzugreifen, müssen Sie den vollständigen URI analysieren. Zum Ausführen dieser Analyse verwenden Sie die QueryHelpers-Klasse aus dem Microsoft.AspNetCore.WebUtilities-Assembly:

@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<p>I want to add this topping: @ToppingName</p>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    private string ToppingName { get; set; }
    
    protected override void OnInitialized()
    {
        var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out var extraTopping))
        {
            ToppingName = System.Convert.ToString(extraTopping);
        }
    }
}

Wenn die oben erwähnte Komponente bereitgestellt wird und ein*e Benutzer*in den URI http://www.contoso.com/pizzas?extratopping=Pineapple aufruft, wird die Meldung „I want to add this topping: Pineapple“ (Ich möchte diesen Belag hinzufügen: Ananas) auf der gerenderten Seite angezeigt.

Sie können das NavigationManager-Objekt auch verwenden, um Ihre Benutzer an eine andere Komponente im Code zu senden, indem Sie die NavigationManager.NavigateTo()-Methode aufrufen:

@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<button class="btn" @onclick="NavigateToPaymentPage">
    Buy this pizza!
</button>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    private void NavigateToPaymentPage()
    {
        NavManager.NavigateTo("buypizza");
    }
}

Verwenden von NavLink-Komponenten

In einem der vorherigen Beispiele wurde Code verwendet, um den Wert von NavigationManager.BaseUri abzurufen und ihn zu verwenden, um das href-Attribut eines <a>-Tags auf die Homepage festzulegen. Verwenden Sie in Blazor die NavLink-Komponente, um <a>-Tags zu rendern, da sie eine active-CSS-Klasse umschaltet, wenn das href-Attribut des Links mit der aktuellen URL übereinstimmt. Indem Sie die active-Klasse gestalten, können Sie dem Benutzer klar machen, welcher Navigationslink für die aktuelle Seite gilt.

Wenn Sie NavLink verwenden, sieht das Codebeispiel für den Link zur Homepage folgendermaßen aus:

@page "/pizzas"
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<NavLink href=@HomePageURI Match="NavLinkMatch.All">Home Page</NavLink>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    public string HomePageURI { get; set; }
    
    protected override void OnInitialized()
    {
        HomePageURI = NavManager.BaseUri;
    }
}

Das Match-Attribut in der NavLink-Komponente wird verwendet, um zu verwalten, wann der Link hervorgehoben wird. Es stehen zwei Optionen zur Verfügung:

• NavLinkMatch.All: Wenn Sie diesen Wert verwenden, wird der Link nur als aktiver Link hervorgehoben, wenn das href-Attribut mit der gesamten aktuellen URL übereinstimmt.
• NavLinkMatch.Prefix: Wenn Sie diesen Wert verwenden, wird der Link als aktiver Link hervorgehoben, wenn das href-Attribut mit dem ersten Teil der aktuellen URL übereinstimmt. Nehmen Sie beispielsweise an, dass Sie diesen Link verwenden: <NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Dieser Link würde als aktiv hervorgehoben, wenn die aktuelle URL http://www.contoso.com/pizzas lautet, und für jeden Speicherort innerhalb dieser URL, z. B. http://www.contoso.com/pizzas/formaggio. Durch dieses Verhalten können Benutzer*innen besser nachvollziehen, welcher Abschnitt der Website aktuell angezeigt wird.