Blazor 라우터 구성 요소를 사용하여 앱의 탐색 제어

5분

Blazor의 라우팅 시스템은 사용자 요청이 해당 요청을 처리하고 사용자가 원하는 정보를 반환할 수 있는 구성 요소에 도달하도록 하는 유연한 옵션을 제공합니다.

피자 배달 회사의 웹 사이트에서 작업하고 있다고 가정합니다. 피자 세부 정보와 사용자 지정 토핑 세부 정보에 대한 요청이 모두 동일한 구성 요소에서 처리되도록 사이트를 설정하려고 합니다. 이 단계를 완료했지만 테스트에서는 토핑 요청이 오류 메시지를 수신하고 있음을 보여 줍니다. 이 문제를 해결해야 합니다.

여기서는 @page 지시문을 사용하여 Blazor에서 경로를 구성하는 방법을 알아봅니다.

참고 항목

이 단원의 코드 블록은 예시입니다. 다음 단원에서는 직접 코드를 작성해 보세요.

경로 템플릿 사용

사용자는 웹앱에서 페이지를 요청할 때 URI의 정보로 보려는 내용을 지정할 수 있습니다. 예:

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

프로토콜 및 웹 사이트 주소 후에 이 URI는 사용자가 margherita 피자에 대해 알고 싶어함을 나타냅니다. 또한 물음표 뒤의 쿼리 문자열에서는 추가 토핑으로 파인애플에 관심이 있음을 보여 줍니다. Blazor에서는 라우팅을 사용하여 각 요청이 가장 잘 응답할 수 있는 구성 요소로 전송되도록 합니다. 또한 라우팅을 사용하여 구성 요소에 사용자가 원하는 내용을 표시하는 데 필요한 모든 정보가 있는지 확인합니다. 이 경우 Pizzas 구성 요소에 요청을 보내고 해당 구성 요소에 파인애플을 추가하는 방법에 대한 정보가 포함된 마르게리타 피자를 표시할 수 있습니다.

Blazor는 라우터 구성 요소라는 특수 구성 요소를 통해 요청을 라우팅합니다. 구성 요소는 다음과 같이 App.razor에서 구성됩니다.

<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>

앱이 시작되면 Blazor는 AppAssembly 특성을 검사하여 검색해야 하는 어셈블리를 확인합니다. 해당 어셈블리에서 RouteAttribute가 있는 구성 요소를 검색합니다. Blazor는 이러한 값을 사용하여 요청이 구성 요소로 라우팅되는 방법을 지정하는 RouteData 개체를 컴파일합니다. 앱을 코딩할 때는 각 구성 요소의 @page 지시문을 사용하여 RouteAttribute를 수정합니다.

이전 코드에서 <Found> 태그는 런타임에 라우팅을 처리하는 구성 요소인 RouteView 구성 요소를 지정합니다. 이 구성 요소는 RouteData 개체와 URI 또는 쿼리 문자열의 매개 변수를 받습니다. 그런 다음 지정된 구성 요소와 해당 레이아웃을 렌더링합니다. <Found> 태그를 사용하여 기본 레이아웃을 지정할 수 있습니다. 이 레이아웃은 선택한 구성 요소가 @layout 지시문을 사용하여 레이아웃을 지정하지 않을 때 사용됩니다. 이 모듈의 뒷부분에서 레이아웃에 대해 좀 더 자세히 알아봅니다.

<Router> 구성 요소에서 <NotFound> 태그를 사용하여 일치하는 경로가 없을 때 사용자에게 반환되는 내용을 지정할 수도 있습니다. 이전 예제에서는 단일 <p> 단락을 반환하지만 더 복잡한 HTML을 렌더링할 수 있습니다. 예를 들어, 홈페이지에 대한 링크 또는 사이트 관리자를 위한 연락처 페이지가 포함될 수 있습니다.

@page 지시문 사용

Blazor 구성 요소에서 @page 지시문은 구성 요소가 요청을 직접 처리해야 한다고 지정합니다. @page 지시문에서 RouteAttribute를 문자열로 전달하여 이를 지정할 수 있습니다. 예를 들어 이 특성은 페이지가 /Pizzas 경로에 대한 요청을 처리하도록 지정합니다.

@page "/Pizzas"

구성 요소 경로를 둘 이상 지정하려면 다음 예시와 같이 두 개 이상의 @page 지시문을 사용합니다.

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

위치 정보를 가져오고 NavigationManager를 통해 탐색

사용자가 요청하는 URI를 처리하는 구성 요소를 작성한다고 가정합니다(예: http://www.contoso.com/pizzas/margherita/?extratopping=pineapple).

구성 요소를 작성할 때 다음과 같이 탐색 정보에 액세스해야 할 수 있습니다.

현재 전체 URI(예: http://www.contoso.com/pizzas/margherita?extratopping=pineapple)
기본 URI(예: http://www.contoso.com/)
기본 상대 경로(예: pizzas/margherita)
쿼리 문자열(예: ?extratopping=pineapple)

NavigationManager 개체를 사용하여 이러한 값을 모두 가져올 수 있습니다. 개체를 구성 요소에 삽입한 다음 해당 속성에 액세스할 수 있습니다. 이 코드는 NavigationManager 개체를 사용하여 웹 사이트의 기본 URI를 가져온 다음, 이를 사용하여 홈페이지에 대한 링크를 설정합니다.

@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;
    }
}

쿼리 문자열에 액세스하려면 전체 URI를 구문 분석해야 합니다. 이 구문 분석을 실행하려면 Microsoft.AspNetCore.WebUtilities 어셈블리의 QueryHelpers 클래스를 사용합니다.

@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);
        }
    }
}

이전 구성 요소가 배포된 경우 사용자가 URI http://www.contoso.com/pizzas?extratopping=Pineapple를 요청하면 렌더링된 페이지에 “다음 토핑을 추가하겠습니다. 파인애플” 메시지가 표시됩니다.

또한 NavigationManager 개체를 사용하여 NavigationManager.NavigateTo() 메서드를 호출해 사용자를 코드의 다른 구성 요소로 보낼 수도 있습니다.

@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");
    }
}

참고

NavigateTo() 메서드에 전달하는 문자열은 사용자를 보내려는 절대 또는 상대 URI입니다. 해당 주소에 구성 요소가 설정되어 있는지 확인합니다. 이전 코드의 경우 @page "/buypizza" 지시문이 있는 구성 요소가 이 경로를 처리합니다.

NavLink 구성 요소 사용

이전 예제 중 하나에서 코드는 NavigationManager.BaseUri 값을 가져오고 <a> 태그의 href 특성을 홈페이지로 설정하는 데 사용되었습니다. Blazor에서는 링크의 href 특성이 현재 URL과 일치할 때 active CSS 클래스를 전환하기 때문에 NavLink 구성 요소를 사용하여 <a> 태그를 렌더링합니다. active 클래스에 스타일을 사용하면 사용자에게 현재 페이지에 대한 탐색 링크를 명확하게 지정할 수 있습니다.

NavLink를 사용하는 경우 홈페이지 링크 예제는 다음 코드와 같습니다.

@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;
    }
}

NavLink 구성 요소의 Match 특성은 링크가 강조 표시될 때 관리하는 데 사용됩니다. 두 가지 옵션 중이 있습니다.

NavLinkMatch.All: 이 값을 사용하면 링크의 href가 현재 URL 전체와 일치하는 경우에만 링크가 활성 링크로 강조 표시됩니다.
NavLinkMatch.Prefix: 이 값을 사용하면 링크의 href가 현재 URL의 첫 번째 부분과 일치할 때 링크가 활성으로 강조 표시됩니다. 예를 들어, <NavLink href="pizzas" Match="NavLinkMatch.Prefix"> 링크가 있다고 가정합니다. 이 링크는 현재 URL이 http://www.contoso.com/pizzas인 경우 해당 URL 내의 모든 위치(예: http://www.contoso.com/pizzas/formaggio)에 대해 강조 표시됩니다. 이 동작은 사용자가 현재 보고 있는 웹 사이트의 섹션을 이해하는 데 도움이 될 수 있습니다.

지식 점검

Blazor 구성 요소 내에서 URI 위치 정보를 얻는 데 사용해야 하는 구성 요소는 무엇입니까?

RouteManager

NavigationManager

ServiceLocator

NavLink가 현재 URL을 참조하는 경우 NavLink 구성 요소가 앵커 태그에 추가하는 기본 CSS 클래스는 무엇인가요?

current

live

active