[Blazor] 라우팅 및 탐색

참조

• https://learn.microsoft.com/ko-kr/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-6.0

경로 템플릿

• Router 구성 요소를 사용하여 Blazor 앱에서 Razor 구성 요소로 라우팅할 수 있습니다.
• App.razor:

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

• @page 지시문을 포함하는 Razor 구성 요소(.razor)를 컴파일하면 생성된 구성 요소 클래스에 구성 요소의 경로 템플릿을 지정하는 RouteAttribute 가 제공됩니다.
• 앱이 시작하면 라우터의 AppAssembly로 지정된 어셈블리를 검사하여 RouteAttribute 가 있는 앱의 구성 요소에 대한 경로 정보를 수집합니다.

싱글 라우트 정의

@page "/routr1"

다중 라우트 정의

@page "/multiroute"
@page "/multiroute2"

Class 라우트 - RouteAttribute 통한 정의

using Microsoft.AspNetCore.Components;

namespace ServierApp.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;}
}

탐색 요소에 집중

• FocusOnNavigate 구성 요소를 사용하여 한 페이지에서 다른 페이지로 이동한 후 CSS 선택기를 기반으로 UI 포커스를 요소로 설정합니다.
• Blazor 프로젝트 템플릿에서 생성된 앱의 App 구성 요소에서 사용중인 FocusOnNavigate 구성 요소를 볼 수 있습니다.
• App.razor 의 경우

<FocusOnNavigate RouteData="@routeData" Selector="h1" />

• Router 구성 요소가 새 페이지로 이동하면 FocusOnNavigate 구성 요소는 페이지의 최상위 헤더(

  )로 포커스를 설정합니다.

• 이는 화면 읽기 프로그램을 사용할 때 페이지 탐색이 공지되도록 하는 일반적인 전략입니다.

콘텐츠를 찾을 수 없는 경우 사용자 지정 콘텐츠 제공

• Router 구성 요소를 사용하면 요청된 경로의 콘텐츠를 찾을 수 없는 경우 앱에서 사용자 지정 콘텐츠를 지정할 수 있습니다.
• App 구성 요소에서 Router 구성 요소의 NotFound 템플릿에서 사용자 지정 콘텐츠를 설정합니다.

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

• 다른 대화형 구성 요소와 같은 임의 항목이 태그의 콘텐츠로 지원됩니다.