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

7분

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

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

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

참고 항목

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

경로 매개 변수

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

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

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

@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 지시문에 중괄호를 사용하여 경로 매개 변수를 지정하고 이름을 지정합니다.

참고

구성 요소 매개 변수는 부모 구성 요소에서 자식 구성 요소로 전송되는 값입니다. 부모에서 구성 요소 매개 변수 값을 자식 구성 요소 태그의 특성으로 지정합니다. 경로 매개 변수는 다르게 지정됩니다. URI의 일부로 지정됩니다. 백그라운드에서 Blazor 라우터는 이러한 값을 가로채서 구성 요소 값으로 구성 요소에 보냅니다. 따라서 동일한 방식으로 액세스할 수 있습니다. 경로 매개 변수는 대/소문자를 구분하지 않으며 동일한 이름의 구성 요소 매개 변수로 전달됩니다.

선택적 경로 매개 변수

이전 예제에서 {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 메서드에서 설정됩니다.

참고

OnInitialized 메서드는 사용자가 처음으로 페이지를 요청할 때 실행됩니다. 다른 라우팅 매개 변수를 사용하여 동일한 페이지를 요청하는 경우 실행되지 않습니다. 예를 들어, 사용자가 http://www.contoso.com/favoritepizza/hawaiian에서 http://www.contoso.com/favoritepizza로 이동할 것으로 예상하는 경우 대신 OnParametersSet() 메서드에서 기본값을 설정합니다.

경로 제약 조건

이전 예제에서 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인치라는 메시지가 표시됩니다. 이와 같은 경로 매개 변수의 특정 형식을 경로 제약 조건이라고 합니다. 제약 조건에 다음과 같은 다른 형식을 사용할 수 있습니다.

제약 조건	예제	일치하는 예제
bool	{vegan:bool}	`http://www.contoso.com/pizzas/true`
Datetime	{birthdate:datetime}	`http://www.contoso.com/customers/1995-12-12`
decimal	{maxprice:decimal}	`http://www.contoso.com/pizzas/15.00`
double	{weight:double}	`http://www.contoso.com/pizzas/1.234`
float	{weight:float}	`http://www.contoso.com/pizzas/1.564`
guid	{pizza id:guid}	`http://www.contoso.com/pizzas/CD2C1638-1638-72D5-1638-DEADBEEF1638`
long	{totals ales:long}	`http://www.contoso.com/pizzas/568192454`

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라는 메시지가 표시되고 하위 폴더 hawaiian은 무시됩니다. 여러 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이라는 메시지가 표시됩니다.

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

경로 매개 변수

선택적 경로 매개 변수

경로 제약 조건

catch-all 경로 매개 변수 설정

지식 점검

피드백