라우팅 및 탐색 (Routing and Navigation 1/2)

경로 템플릿

 

https://yogingang.tistory.com/131 를 보고 Blazor Server 프로젝트를 만들었다고 가정합니다. 

 

위의 App.razor 를 선택 한다. 

위와 같은 내용을 볼 수 있다. 

앱이 시작하면 라우터의 AppAssembly로 지정된 어셈블리를 검사하여 

RouteAttribute가 있는 앱의 구성 요소에 대한 경로 정보를 수집한다. 

 

 

FocusOnNavigate : 한페이지에서 다른 페이지로 이동 CSS 선택기를 사용하여

UI 포커스를 해당 요소로 설정(Selector="h1")

 

NotFound : 요청된 경로의 콘텐츠를 찾을 수 없는 경우 앱에서 사용자 지정 콘텐츠를 지정

 

 

여러 어셈블리에서 Components 로 라우팅 하는 방법

 

<Router
    AppAssembly="@typeof(Program).Assembly"
    AdditionalAssemblies="new[] { typeof(Component1).Assembly }">
    @* ... Router component elements ... *@
</Router>

 

경로 매개 변수 

경로에 매개 변수를 전달 할 수 있다. 대/소 문자를 구분하지 않는다.

@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string? Text { get; set; }
}

/RouteParameter/awesome 이라고 해보자

 

선택적 매개 변수

(매개변수 뒤에 ? 를 추가하여 선택적 매개 변수를 사용할 수 있다.)

@page "/RouteParameter/{text}"  ==> @page "/RouteParameter/{text?}"

 

text 변수에 값이 없다면 clever! 가 표시된다.

@page "/RouteParameter/{text?}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string? Text { get; set; }

    protected override Task OnInitializedAsync()
    {
        Text = Text ?? "clever";
        return base.OnInitializedAsync();
    }
}

 

경로 제약 조건

 

경로 변수에 type 제한을 둘 수 있다. 

@page "/user/{Id:int}"

id 는 int 형이어야 하고 그렇지 않다면 page 를 찾지 못한다. 

 

경로 제약 조건은 선택적 매개 변수에도 작용한다. 

@page "/RouteParameter/{text?}/{id:int?}"

<h1>Blazor is @Text! @Id times</h1>

@code {
    [Parameter]
    public string? Text { get; set; }
    [Parameter]
    public int? Id { get; set; }

    protected override Task OnInitializedAsync()
    {
        Text = Text ?? "clever";
        Id = Id ?? 1;
        return base.OnInitializedAsync();
    }
}

 

모든 경로 매개 변수 catch

 

@page "/catch-all/{*pageRoute}"

<h1>@PageRoute</h1>
@foreach(var parameter in Parameters)
{
<h2>@parameter</h2>
}

@code {
    [Parameter]
    public string? PageRoute { get; set; }
    [Parameter]
    public dynamic Parameters { get; set; }

    protected override Task OnInitializedAsync()
    {
        Parameters = PageRoute?.Split('/', StringSplitOptions.RemoveEmptyEntries);
        return base.OnInitializedAsync();
    }
}

 

 

관련영상

https://youtu.be/7ag4m-5xg2Q