라우팅.

블레이저 서버 앱은 ASP.net Core EndPoint라우팅을 사용하며, ASP.net Core EndPoint 라우팅의 MapBlazorHub 확장 방법을 사용 Blazor 구성요소에 대한 수신 연결을 허용한다.

 

Blazor Client app

<Router AppAssembly="@typeof(Program).Assembly"/>

Blazor Server app

 

일반적으로 _Host.cshtml 구성요소에 정의 되나, 기본적으로는 아래 설정을 따른다.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)  
{    
	//요청 URL에 대한 경로 사용 및 계산 설정
    app.UseRouting();  
  
  	//컨트롤러와 해당 핸들러를 실행하는 설정
    app.UseEndpoints(endpoints =>  
    {  
        endpoints.MapBlazorHub();  
        //경로 구성이 옳지 않을 때 대비 루트
        endpoints.MapFallbackToPage("/_Host");  
    });  
}  

 

라우트 컴포넌트 정의

기본적으로 App.razor 에 정의되며, 세가지 추가 컴포넌트(Found, RouteView, NotFound) 로 구성 된다.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

 

페이지 라우트 정의

1. @page 지시문

@page 지시어를 사용하여 Blazor 구성요소에서 라우팅을 정의할 수 있으며, @page 지시어는 컴파일되면 내부적으로 RouteAttribute로 변환되어 실행 된다.

 

싱글 라우트 정의

@page "/route1"

다중 라우트 정의

@page "/multiroute"  
@page "/multiroute1" 

2. Class 라우트

 

RouteAttribute를 통한 정의

using Microsoft.AspNetCore.Components;  
  
namespace ServerApp.Pages  
{  
    [Route("/classroute")]  
    public class ClassComponent: ComponentBase  
    {  
       ...  
    }  
}

@Page 지시문을 통한 매개 변수 - 입력 값은 대소문자를 구분하지 않는다.

<h3>라우트 변수 예시</h3>  
@page "/route/{ParamName}"  
  
<h4>ParamName : @ParamName </h4>  
  
@code {  
    [Parameter]  
    //기본 매개변수 자료형은 String 
    public string ParamName { get; set; }  
}

라우트 매개 변수 자료형 정의

자료형	문화권에 따른 변동 여부	예시
int	Yes	{id:int}
long	Yes	{id:long}
float	Yes	{mrp:float}
double	Yes	{mrp:double}
decimal	Yes	{mrp:decimal}
guid	No	{id:guid}
bool	No	{enabled:bool}
datetime	Yes	{regdate:datetime}

NavLink 활성화 / 비 활성화 지원 - Match 속성 두 가지 옵션 (CSS 의 Actived 요소 지원)

- NavLinkMatch.모두: 전체 현재 URL과 일치 시 활성화
- NavLinkMatch.접두사: 기본 옵션임. 현재 URL의 접두사와 일치 시 활성화

 

페이지 이동

블레이져는 네비게이션 관리자인 NavigationManager 를 통해 제공

이벤트 / 함수	설명
NavigateTo	지정된 주소로 이동. 매개변수 forceload의 값을 true로 설정된 경우 클라이언트측 라우팅이 바이패스되고 브라우저가 새 페이지를 로드하도록 강제.
ToAbsoluteUri	상대 주소를 절대 주소로 변환.
ToBaseRelativePath	기본 주소 접두사를 사용하여 상대 주소 반환.
NotifyLocationChanged	브라우저 주소가 변경되면 이벤트 발생.
EnsureInitialized	파생 클래스가 자체 초기화 허용.
Initialize	기본 주소 및 현재 주소 설정
NavigateToCore	지정된 주소로 이동. 파생 클래스에서 실행.

@page "/navrouteexample"  
@inject NavigationManager UriHelper  
<h3> 네비게이션 기본 예시</h3>  
Navigate to other component <a href="" @onclick="NavigatetoNextComponent">Click here</a>  
  
@code {  
    void NavigatetoNextComponent()  
    {  
        UriHelper.NavigateTo("newcomponent");  
    }  
}

속성	설명
BaseUri	현재 기본 주소를 가져오거나 설정.
Uri	현재 주소를 가져오거나 설정.

<h3>네비게이션 주소 파라미터 예시</h3>  
@page "/newnavwithpara"  
@inject NavigationManager UriHelper  
@using Microsoft.AspNetCore.WebUtilities;  
  
<p> Parameter value : @Name</p>  
  
@code {  
    public string Name { get; set; }  
    protected override void OnInitialized()  
    {  
        var uri = UriHelper.ToAbsoluteUri(UriHelper.Uri);  
        Name = QueryHelpers.ParseQuery(uri.Query).TryGetValue("name", out var type) ? type.First() : "";  
    }  
}

이외에도 클래스 / 함수 등에 RouteAttribute 를 통해 다양하게 경로를 제공한다.