경로 매개 변수가 Blazor 앱의 라우팅에 미치는 영향 살펴보기

지금까지 Blazor 모듈에서는 URI의 일부를 사용하여 요청을 올바른 구성 요소로 라우팅하는 방법을 살펴보았습니다. 경로 매개 변수를 사용하여 URI의 다른 부분을 가로채 코드에서 액세스할 수도 있습니다.

피자 배달 회사의 웹 사이트에서 작업 중이며 피자 요청을 Pizzas.razor 구성 요소로 라우팅한다고 가정해 보겠습니다. 이제 URI에서 사용자의 즐겨찾는 피자를 받아서 사용자가 원할 수 있는 다른 피자에 대한 정보를 표시하는 데 사용하려고 합니다.

여기서는 경로 매개 변수를 사용하여 코드에서 처리할 URL의 부분을 지정하는 방법을 알아봅니다.

경로 매개 변수

이 모듈의 앞부분에서는 사용자가 요청하는 URI의 부분을 사용하여 요청을 올바른 구성 요소로 라우팅하는 방법을 배웠습니다. 렌더링된 페이지에서 URI의 다른 부분을 값으로 사용하려는 경우가 많습니다. 예를 들어 사용자가 다음을 요청한다고 가정합니다.

http://www.contoso.com/favoritepizza/hawaiian

지시문을 사용하여 @page 이 요청을 FavoritePizza.razor 구성 요소로 라우팅하는 방법을 알아보았습니다. 이제 구성 요소에서 하와이 의 가치를 활용하려고 합니다. 이 값을 가져오려면 경로 매개 변수로 선언할 수 있습니다.

@page 지시문을 사용하여 구성 요소에 경로 매개 변수로 전달되는 URI 부분을 지정합니다. 구성 요소의 코드에서 구성 요소 매개 변수의 값을 가져오는 것과 동일한 방식으로 경로 매개 변수의 값을 가져올 수 있습니다.

@page "/FavoritePizzas/{favorite}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

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

이전 코드는 @page 지시문에 중괄호를 사용하여 경로 매개 변수를 지정하고 이름을 지정합니다.

선택적 경로 매개 변수

이전 예제에서 {favorite} 매개 변수는 필수입니다. 경로 매개 변수를 선택 사항으로 만들려면 물음표를 사용합니다.

@page "/FavoritePizzas/{favorite?}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
    
    protected override void OnInitialized()
    {
        Favorite ??= "Fiorentina";
    }
}

선택적 매개 변수의 기본값을 설정하는 것이 좋습니다. 이전 예제에서 Favorite 매개 변수의 기본값은 OnInitialized 메서드에서 설정됩니다.

경로 제약 조건

이전 예제에서 URI http://www.contoso.com/favoritepizza/2 요청의 결과는 “즐겨찾는 피자: 2”라는 의미 없는 메시지입니다. 다른 경우에서 이러한 형식 불일치가 예외를 발생시키고 사용자에게 오류를 표시할 수 있습니다. 경로 매개 변수에 대한 형식을 지정하는 것이 좋습니다.

@page "/FavoritePizza/{preferredsize:int}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza size is: @FavoriteSize inches.</p>

@code {
    [Parameter]
    public int FavoriteSize { get; set; }
}

이 예제에서 사용자가 http://www.contoso.com/favoritepizza/margherita를 요청하는 경우 이전 구성 요소와 일치하는 항목이 없습니다. 따라서 요청은 다른 곳으로 라우팅됩니다. 사용자가 요청하는 http://www.contoso.com/favoritepizza/12경우 경로가 일치하고 구성 요소에 즐겨 찾는 피자 크기가 12인치라는 메시지가 표시됩니다. 이와 같은 경로 매개 변수에 대해 제공되는 특정 형식을 경로 제약 조건이라고 합니다. 제약 조건에 다음과 같은 다른 형식을 사용할 수 있습니다.

catch-all 경로 매개 변수 설정

이 단원의 앞부분에 나온 다음 구성 요소를 생각해 보겠습니다.

@page "/FavoritePizza/{favorite}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

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

이제 사용자가 http://www.contoso.com/favoritepizza/margherita/hawaiian이라는 URI를 요청하여 두 개의 즐겨찾기를 지정하려고 한다고 가정합니다. 페이지에는 가장 좋아하는 피자인 마게리타(margherita )가 표시되고 하위 폴더 하와이를 무시합니다. 여러 URI 폴더 경계(슬래시)에 걸쳐 경로를 캡처하는 catch-all 경로 매개 변수를 사용하여 이 동작을 변경할 수 있습니다. 경로 매개 변수 이름에 별표(*)를 접두사로 지정하여 경로 매개 변수를 catch-all로 만듭니다.

@page "/FavoritePizza/{*favorites}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizzas are: @Favorites</p>

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

동일한 요청 URI를 사용하여 페이지에 사용자가 가장 좋아하는 피자인 margherita/hawaiian 메시지가 표시됩니다.