다음을 통해 공유

ASP.NET Core Blazor 라우팅

비고

이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 10 버전을 참조하세요.

경고

이 버전의 ASP.NET Core는 더 이상 지원되지 않습니다. 자세한 내용은 .NET 및 .NET Core 지원 정책을 참조 하세요. 현재 릴리스는 이 문서의 .NET 10 버전을 참조하세요.

이 문서는 Blazor 앱 요청 라우팅에 대해 설명하며, 정적 라우팅과 대화형 라우팅, ASP.NET Core 엔드포인트 라우팅 통합, 탐색 이벤트 및 Razor 구성 요소에 대한 경로 템플릿과 제약 조건에 관한 지침을 제공합니다.

Blazor의 라우팅은 @page 지시문으로 앱의 액세스 가능한 각 구성 요소에 경로 템플릿을 제공하여 수행됩니다. Razor 지시문을 포함하는 @page 파일이 컴파일되면 생성된 클래스에 경로 템플릿을 지정하는 RouteAttribute가 제공됩니다. 런타임에 라우터는 RouteAttribute를 사용하여 구성 요소 클래스를 검색하고 요청한 URL과 일치하는 경로 템플릿이 있는 모든 구성 요소를 렌더링합니다.

다음 HelloWorld 구성 요소는 /hello-world의 경로 템플릿을 사용하며 구성 요소에 대해 렌더링된 웹 페이지는 상대 URL /hello-world에 도달합니다.

HelloWorld.razor:

@page "/hello-world"

<h1>Hello World!</h1>

위의 구성 요소는 앱의 UI 탐색에 구성 요소를 링크로 추가할지 여부에 관계없이 브라우저 /hello-world 에 로드됩니다.

정적 라우팅 및 대화형 라우팅

이 섹션은 s에 Blazor Web App적용됩니다.

미리 렌더링이 활성화되면 라우터(Blazor 구성 요소가 Router에서 <Router>에 있는 경우) 정적 서버 측 렌더링(정적 SSR)을 수행하는 동안 구성 요소에 대한 정적 라우팅을 수행합니다. 이러한 유형의 라우팅을 정적 라우팅이라고 합니다.

구성 요소 Routes에 대화형 렌더링 모드가 할당되면, 서버에서 수행된 정적 SSR과 함께 Blazor 라우터 정적 라우팅이 완료된 후 라우터가 대화형으로 전환됩니다. 이러한 유형의 라우팅을 대화형 라우팅이라고합니다.

정적 라우터는 엔드포인트 라우팅 및 HTTP 요청 경로를 사용하여 렌더링할 구성 요소를 결정합니다. 라우터가 대화형이 되면 문서의 URL(브라우저 주소 표시줄의 URL)을 사용하여 렌더링할 구성 요소를 결정합니다. 즉, 대화형 라우터는 문서의 URL이 다른 유효한 내부 URL로 동적으로 변경될 경우 렌더링되는 구성 요소를 동적으로 변경할 수 있으며, 새 페이지 콘텐츠를 가져오는 HTTP 요청을 수행하지 않고도 변경할 수 있습니다.

또한 대화형 라우팅은 일반 페이지 요청이 있는 서버에서 새 페이지 콘텐츠가 요청되지 않으므로 미리 렌더링할 수 없습니다. 자세한 내용은 ASP.NET Core Blazor 미리 렌더링된 상태 지속성을 참조하세요.

ASP.NET Core 엔드포인트 라우팅 통합

이 항목은 회로를 통해 작동하는 Blazor Web App에 적용됩니다.

A Blazor Web App 는 ASP.NET 핵심 엔드포인트 라우팅에 통합됩니다. ASP.NET Core 앱은 라우팅 가능한 구성 요소를 위한 엔드포인트와 그 엔드포인트에 대해 MapRazorComponents에서 Program 파일에 렌더링할 루트 구성 요소로 구성됩니다. 기본 루트 구성 요소(로드된 첫 번째 구성 요소)는 App 구성 요소(App.razor)입니다.

app.MapRazorComponents<App>();

이 섹션은 회로를 Blazor Server 통해 작동하는 앱에 적용됩니다.

Blazor Server는 ASP.NET Core 엔드포인트 라우팅에 통합됩니다. ASP.NET Core 앱은 MapBlazorHub 파일에 있는 Program 대화형 구성 요소에 대해 들어오는 연결을 허용하도록 구성됩니다.

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

이 섹션은 회로를 Blazor Server 통해 작동하는 앱에 적용됩니다.

Blazor Server는 ASP.NET Core 엔드포인트 라우팅에 통합됩니다. MapBlazorHub의 Startup.Configure를 사용하여 대화형 구성 요소에 대해 들어오는 연결을 허용하도록 ASP.NET Core 앱을 구성합니다.

일반적인 구성은 Razor 앱의 서버 쪽 호스트 역할을 하는 Blazor Server 페이지로 모든 요청을 라우팅하는 것입니다. 규칙에 따라 ‘호스트’ 페이지의 이름은 일반적으로 앱의 폴더에서 _Host.cshtml입니다.Pages

호스트 파일에 지정된 경로는 경로 일치 시 낮은 우선순위로 작동하기 때문에 ‘대체 경로’라고 합니다. 일치하는 다른 경로가 없는 경우 대체(fallback) 경로가 사용됩니다. 이렇게 하면 앱이 Blazor Server 앱의 구성 요소 라우팅을 방해하지 않고 다른 컨트롤러와 페이지를 사용할 수 있습니다.

루트가 아닌 URL 서버 호스팅을 구성하는 MapFallbackToPage 방법에 대한 자세한 내용은 ASP.NET Core Blazor 앱 기본 경로를 참조하세요.

경로 템플릿

앱의 Router 구성 요소(Razor)에 위치한 Routes 구성 요소는 Components/Routes.razor 구성 요소로 라우팅할 수 있게 합니다.

컴포넌트 Router는 Razor 컴포넌트로 라우팅을 가능하게 합니다. Router 구성 요소는 App 구성 요소(App.razor)에서 사용됩니다.

Razor 구성 요소(.razor)에 @page 지시문이 포함된 것이 컴파일될 때, 생성된 구성 요소 클래스에 구성 요소의 경로 템플릿을 지정하는 RouteAttribute가 제공됩니다.

앱이 시작하면 라우터의 AppAssembly로 지정된 어셈블리를 검사하여 RouteAttribute가 있는 앱의 구성 요소에 대한 경로 정보를 수집합니다.

런타임에 RouteView 구성 요소는 다음을 수행합니다.

  • RouteData에서 경로 매개 변수와 함께 Router를 받습니다.
  • 추가로 중첩된 레이아웃을 포함하여 해당 레이아웃과 함께 지정된 구성 요소를 렌더링합니다.

필요한 경우, DefaultLayout으로 레이아웃을 지정하지 않는 구성 요소에 레이아웃 클래스가 포함된 @layout 매개 변수를 지정합니다. 프레임워크의 Blazor 프로젝트 템플릿은 MainLayout 구성 요소(MainLayout.razor)를 앱의 기본 레이아웃으로 지정합니다. 레이아웃에 대한 자세한 내용은 ASP.NET Core Blazor 레이아웃을 참조하세요.

구성 요소는 여러 @page 지시문을 사용하여 여러 경로 템플릿을 지원합니다. 다음 예제 구성 요소는 /blazor-route 및 /different-blazor-route에 대한 요청을 로드합니다.

BlazorRoute.razor:

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Routing Example</h1>

<p>
    This page is reached at either <code>/blazor-route</code> or 
    <code>/different-blazor-route</code>.
</p>

중요

URL을 올바르게 확인하려면 앱에 <base> 태그(<head> 콘텐츠의 위치)가 있어야 하고, 앱 기본 경로가 href 특성에 지정되어 있어야 합니다. 자세한 내용은 ASP.NET Core Blazor 앱 기본 경로를 참조하세요.

Router는 쿼리 문자열 값과 상호 작용하지 않습니다. 쿼리 문자열을 작업하려면 쿼리 문자열을 참조하세요.

@page 지시문을 사용하여 경로 템플릿을 문자열 리터럴로 지정하는 대신, @attribute 지시문을 사용하여 상수 기반 경로 템플릿을 지정할 수 있습니다.

다음 예제에서, 구성 요소의 @page 지시문은 앱의 다른 곳에서 "@attribute"로 설정된 Constants.CounterRoute의 /counter 지시문 및 상수 기반 경로 템플릿으로 바뀝니다.

- @page "/counter"
+ @attribute [Route(Constants.CounterRoute)]

비고

.NET 5.0.1 릴리스 및 추가 5.x 릴리스의 경우, Router 구성 요소에는 PreferExactMatches 매개 변수가 @true로 설정됩니다. 자세한 내용은 ASP.NET Core 3.1에서 .NET 5로 마이그레이션을 참조하세요.

탐색 요소에 집중

FocusOnNavigate 구성 요소는 한 페이지에서 다른 페이지로 이동한 후 CSS 선택기를 기반으로 UI 포커스를 요소로 설정합니다.

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

Router 구성 요소가 새 페이지로 이동하면 FocusOnNavigate 구성 요소는 페이지의 최상위 헤더(<h1>)로 포커스를 설정합니다. 이는 화면 읽기 프로그램을 사용할 때 페이지 탐색이 공지되도록 하는 일반적인 전략입니다.

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

찾을 수 없는 콘텐츠가 있는 요청의 경우, Router 구성 요소의 NotFoundPage 매개 변수에 Razor 구성 요소를 할당할 수 있습니다. 매개 변수는 찾을 수 없음 응답을 트리거하는 개발자 코드에서 호출된 메서드와 함께 NavigationManager.NotFound작동합니다. NavigationManager.NotFound 은 다음 문서 ASP.NET Core Blazor 탐색에 설명되어 있습니다.

프로젝트 템플릿에는 NotFound.razor 페이지가 포함됩니다. 이 페이지는 호출할 때마다 NavigationManager.NotFound 자동으로 렌더링되므로 일관된 사용자 환경으로 누락된 경로를 처리할 수 있습니다.

NotFound.razor:

@page "/not-found"
@layout MainLayout

<h3>Not Found</h3>
<p>Sorry, the content you are looking for does not exist.</p>

NotFound 구성 요소는 라우터의 NotFoundPage 매개 변수에 할당됩니다. NotFoundPage는 Blazor 미들웨어가 아닌 것도 포함하여 상태 코드 페이지 재실행 미들웨어에서 사용할 수 있는 라우팅을 지원합니다.

다음 예제에서는 이전 NotFound 구성 요소가 앱의 Pages 폴더에 있고 매개 변수에 NotFoundPage 전달됩니다.

<Router AppAssembly="@typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

자세한 내용은 ASP.NET Core Blazor 탐색에 대한 다음 문서를 참조하세요.

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

구성 요소의 Router 매개 변수에 NotFound 대한 사용자 지정 콘텐츠를 설정합니다.

<Router ...>
    ...
    <NotFound>
        ...
    </NotFound>
</Router>

임의의 항목은 다른 대화형 구성 요소와 같은 매개 변수의 NotFound 콘텐츠로 지원됩니다. NotFound 콘텐츠에 기본 레이아웃을 적용하려면 ASP.NET Core Blazor 레이아웃을 참조하세요.

Blazor Web App는 매개 변수(NotFound태그)를 사용하지 <NotFound>...</NotFound> 않지만 프레임워크의 호환성이 손상되지 않도록 .NET 8/9의 이전 버전과의 호환성을 위해 매개 변수가 지원됩니다†. 서버 쪽 ASP.NET Core 미들웨어 파이프라인은 서버에서 요청을 처리합니다. 서버 쪽 기술을 사용하여 잘못된 요청을 처리합니다.

†지원됨이란 이 컨텍스트에서 <NotFound>...</NotFound> 마크업을 배치해도 예외가 발생하지는 않지만, 그 마크업을 사용하는 것이 효과적이지도 않음을 의미합니다.

자세한 내용은 다음 리소스를 참조하세요.

여러 어셈블리의 구성 요소로 라우팅

이 섹션은 s에 Blazor Web App적용됩니다.

Router 구성 요소의 AdditionalAssemblies 매개 변수 및 엔드포인트 규칙 작성기를 AddAdditionalAssemblies 사용하여 추가 어셈블리에서 라우팅 가능한 구성 요소를 검색합니다. 다음 하위 섹션에서는 각 API를 사용하는 시기와 방법을 설명합니다.

정적 라우팅

정적 SSR(서버 쪽 렌더링)을 위한 추가 어셈블리에서 라우팅 가능한 구성 요소를 검색하려면 나중에 라우터가 대화형 렌더링을 위해 대화형으로 설정되더라도 어셈블리를 프레임워크에 Blazor 공개해야 합니다. AddAdditionalAssemblies 서버 프로젝트의 MapRazorComponents 파일에 연결된 추가 어셈블리를 사용하여 Program 메서드를 호출합니다.

다음 예제에서는 프로젝트의 BlazorSample.Client 파일을 사용하여 _Imports.razor 프로젝트의 어셈블리에 라우팅 가능한 구성 요소를 포함합니다.

app.MapRazorComponents<App>()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

비고

위의 지침은 구성 요소 클래스 라이브러리 시나리오에도 적용됩니다. 클래스 라이브러리 및 정적 SSR에 대한 추가 중요한 지침은 정적 서버 쪽 렌더링(정적 SSR)이 있는 ASP.NET Core Razor 클래스 라이브러리(RCL)에서 찾을 수 있습니다.

대화형 라우팅

서버에서 정적 SSR 및 정적 라우팅 후에 라우터를 대화형으로 만드는 Routes 구성 요소(Routes.razor)에 대화형 렌더링 모드를 할당 Blazor 할 수 있습니다. 예를 들어 <Routes @rendermode="InteractiveServer" /> 대화형 서버 쪽 렌더링(대화형 SSR)을 구성 요소에 Routes 할당합니다. Router 구성 요소는 Routes 구성 요소로부터 대화형 서버 쪽 렌더링(SSR)을 상속합니다. 라우터는 서버에서 정적 라우팅 후 대화형이 됩니다.

대화형 라우팅에 대한 내부 탐색에는 서버에서 새 페이지 콘텐츠를 요청하는 작업이 포함되지 않습니다. 따라서 내부 페이지 요청에 대해 미리 렌더링이 발생하지 않습니다. 자세한 내용은 ASP.NET Core Blazor 미리 렌더링된 상태 지속성을 참조하세요.

서버 프로젝트에 Routes 구성 요소가 정의된 경우, AdditionalAssemblies 구성 요소의 Router 매개 변수에는 .Client 프로젝트의 어셈블리가 포함되어야 합니다. 이렇게 하면 대화형으로 렌더링될 때 라우터가 올바르게 작동할 수 있습니다.

다음 예제 Routes 에서 구성 요소는 서버 프로젝트에 있으며 _Imports.razor 프로젝트의 파일 BlazorSample.Client 은 라우팅 가능한 구성 요소를 검색할 어셈블리를 나타냅니다.

<Router
    AppAssembly="..."
    AdditionalAssemblies="[ typeof(BlazorSample.Client._Imports).Assembly ]">
    ...
</Router>

AppAssembly에 지정된 어셈블리 외에도 추가 어셈블리가 검색됩니다.

비고

위의 지침은 구성 요소 클래스 라이브러리 시나리오에도 적용됩니다.

또는 경로 선택할 수 있는 구성 요소는 전역 Interactive WebAssembly 또는 자동 렌더링이 적용된 .Client 프로젝트에만 존재하며, Routes 구성 요소는 서버 프로젝트가 아닌 .Client 프로젝트에 정의됩니다. 이 경우 라우팅 가능한 구성 요소가 있는 외부 어셈블리가 없으므로 값을 지정할 AdditionalAssemblies필요가 없습니다.

이 섹션은 Blazor Server 앱에 적용됩니다.

Router 구성 요소의 AdditionalAssemblies 매개 변수 및 엔드포인트 규칙 작성기를 AddAdditionalAssemblies 사용하여 추가 어셈블리에서 라우팅 가능한 구성 요소를 검색합니다.

다음 예제에서는 참조된 Component1에 정의된 라우팅 가능한 구성 요소가 ComponentLibrary와 함께 제공됩니다.

<Router
    AppAssembly="..."
    AdditionalAssemblies="new[] { typeof(ComponentLibrary.Component1).Assembly }">
    ...
</Router>

AppAssembly에 지정된 어셈블리 외에도 추가 어셈블리가 검색됩니다.

경로 매개 변수

라우터는 경로 매개 변수를 사용하여 해당 구성 요소 매개 변수를 동일한 이름으로 채웁니다. 경로 매개 변수 이름은 대/소문자를 구분하지 않습니다. 다음 예제에서 text 매개 변수는 경로 세그먼트의 값을 구성 요소의 Text 속성에 할당합니다. 요청이 /route-parameter-1/amazing일 경우, 콘텐츠가 Blazor is amazing!로 렌더링됩니다.

RouteParameter1.razor:

@page "/route-parameter-1/{text}"

<h1>Route Parameter Example 1</h1>

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

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

선택적 매개 변수가 지원됩니다. 다음 예제에서 text 선택적 매개 변수는 경로 세그먼트의 값을 구성 요소의 Text 속성에 할당합니다. 세그먼트가 없으면 Text 값이 fantastic으로 설정됩니다.

선택적 매개 변수는 지원되지 않습니다. 다음 예제에서는 두 개의 @page 지시문이 적용되었습니다. 첫 번째 지시문은 매개 변수 없이 구성 요소 탐색을 허용합니다. 두 번째 지시문은 {text} 경로 매개 변수 값을 구성 요소의 Text 속성에 할당합니다.

RouteParameter2.razor:

@page "/route-parameter-2/{text?}"

<h1>Route Parameter Example 2</h1>

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

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

    protected override void OnParametersSet() => Text = Text ?? "fantastic";
}

OnInitialized{Async} 라이프사이클 메서드를 OnParametersSet{Async} 라이프사이클 메서드 대신 사용할 때, 사용자가 동일한 구성 요소 내에서 탐색할 경우 Text 속성의 fantastic 기본 할당이 발생하지 않습니다. 예를 들어 이 상황은 사용자가 /route-parameter-2/amazing에서 /route-parameter-2로 이동할 때 발생합니다. 구성 요소 인스턴스가 유지되고 새 매개 변수를 수락하면 메서드가 OnInitialized 다시 호출되지 않습니다.

비고

경로 매개 변수는 쿼리 문자열 값에 작용하지 않습니다. 쿼리 문자열을 작업하려면 쿼리 문자열을 참조하세요.

경로 제약 조건

경로 제약 조건은 경로 세그먼트의 형식 일치를 구성 요소에 적용합니다.

다음 예제에서 User 구성 요소의 경로는 다음과 같은 경우에만 일치합니다.

  • 요청 URL에 Id 경로 세그먼트가 있는 경우
  • Id 세그먼트가 정수(int) 형식인 경우

User.razor:

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

<h1>User Example</h1>

<p>User Id: @Id</p>

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

비고

경로 제약 조건은 쿼리 문자열 값에 작용하지 않습니다. 쿼리 문자열을 작업하려면 쿼리 문자열을 참조하세요.

다음 표에 나와 있는 경로 제약 조건을 사용할 수 있습니다. 고정 문화권과 일치하는 경로 제약 조건에 대한 자세한 내용은 표 아래에 있는 경고를 참조하세요.

제약 조건 예제 매치 예시 불변
문화
일치하는
bool {active:bool} true, FALSE 아니요
datetime {dob:datetime} 2016-12-31, 2016-12-31 7:32pm 예
decimal {price:decimal} 49.99, -1,000.01 예
double {weight:double} 1.234, -1,001.01e8 예
float {weight:float} 1.234, -1,001.01e8 예
guid {id:guid} 00001111-aaaa-2222-bbbb-3333cccc4444, {00001111-aaaa-2222-bbbb-3333cccc4444} 아니요
int {id:int} 123456789, -123456789 예
long {ticks:long} 123456789, -123456789 예
nonfile {parameter:nonfile} BlazorSample.styles.css도 아니고 favicon.ico도 아니다 예

경고

CLR 형식(예: int 또는 DateTime)으로 변환되는 URL을 확인하는 경로 제약 조건은 항상 고정 문화권을 사용합니다. 이러한 제약 조건은 URL은 지역화될 수 없다고 가정합니다.

경로 제약 조건은 선택적 매개 변수에도 작용합니다. 다음 예제에서는 Id가 필수이지만 Option은 선택적 부울 경로 매개 변수입니다.

User.razor:

@page "/user/{id:int}/{option:bool?}"

<p>
    Id: @Id
</p>

<p>
    Option: @Option
</p>

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

    [Parameter]
    public bool Option { get; set; }
}

경로 매개 변수에서 파일 캡처 방지

다음 경로 템플릿은 선택적 경로 매개 변수(Optional)에서 실수로 정적 자산 경로를 캡처합니다. 예를 들어 앱의 스타일시트(.styles.css)가 캡처되면 앱의 스타일이 깨집니다.

@page "/{optional?}"

...

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

경로 매개 변수를 파일 이외의 경로를 캡처하도록 제한하려면 경로 템플릿에서 :nonfile 제약 조건을 사용합니다.

@page "/{optional:nonfile?}"

점이 포함된 URL을 사용한 라우팅

서버 쪽 기본 경로 템플릿은 요청 URL의 마지막 세그먼트에 파일이 요청된 점(.)이 포함되어 있다고 가정합니다. 예를 들어 관련 URL /example/some.thing은 라우터에서 some.thing라는 파일에 대한 요청으로 해석됩니다. 추가 구성이 없을 경우, 앱은 가 some.thing 지시문이 있는 구성 요소로 라우트될 것으로 예상되었으나 @page가 경로 매개변수 값인 경우, some.thing 응답을 반환합니다. 점이 포함된 하나 이상의 매개 변수가 있는 경로를 사용하려면 앱에서 사용자 지정 템플릿을 사용하여 경로를 구성해야 합니다.

URL의 마지막 세그먼트에서 경로 매개 변수를 받을 수 있는 다음 Example 구성 요소를 고려합니다.

Example.razor:

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

호스팅된 ServerBlazor WebAssembly의 앱이 경로 매개 변수에서 점을 사용하여 요청을 라우팅하도록 허용하려면, 파일에 선택적 매개 변수가 포함된 대체 파일 경로 템플릿을 추가하세요.

app.MapFallbackToFile("/example/{param?}", "index.html");

Blazor Server 앱을 경로 매개 변수에 점이 포함된 요청을 라우팅하도록 구성하려면 param 파일에서 선택적 매개 변수를 가진 대체 페이지 경로 템플릿을 추가합니다.

app.MapFallbackToPage("/example/{param?}", "/_Host");

자세한 내용은 ASP.NET Core의 라우팅을 참조하세요.

호스트된 ServerBlazor WebAssembly의 앱이 param 경로 매개 변수에 점을 사용하여 요청을 라우팅하도록 허용하려면 Startup.Configure에서 선택적 매개 변수를 사용하여 대체 파일 경로 템플릿을 추가합니다.

Startup.cs:

endpoints.MapFallbackToFile("/example/{param?}", "index.html");

Blazor Server 경로 매개 변수에서 점을 사용하여 요청을 라우팅하도록 param 앱을 구성하려면 Startup.Configure에서 선택적 매개 변수를 사용하여 대체 페이지 경로 템플릿을 추가합니다.

Startup.cs:

endpoints.MapFallbackToPage("/example/{param?}", "/_Host");

자세한 내용은 ASP.NET Core의 라우팅을 참조하세요.

모든 것을 수용하는 경로 매개변수

여러 폴더 경계에서 경로를 캡처하는 catch-all 경로 매개 변수는 구성 요소에서 지원됩니다.

포괄적인 경로 매개 변수는 다음과 같습니다.

  • 이름이 경로 세그먼트 이름과 일치합니다. 이름을 지정할 때 대소문자를 구분하지 않습니다.
  • string 형식입니다. 프레임워크가 자동 캐스팅을 제공하지 않습니다.
  • URL의 끝부분에 있습니다.

CatchAll.razor:

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

<h1>Catch All Parameters Example</h1>

<p>Add some URI segments to the route and request the page again.</p>

<p>
    PageRoute: @PageRoute
</p>

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

/catch-all/this/is/a/test의 경로 템플릿이 있는 URL /catch-all/{*pageRoute}의 경우 PageRoute의 값이 this/is/a/test로 설정됩니다.

캡처된 경로의 슬래시 및 세그먼트가 디코딩됩니다. /catch-all/{*pageRoute}의 경로 템플릿의 경우 /catch-all/this/is/a%2Ftest%2A URL은 this/is/a/test*를 생성합니다.

OnNavigateAsync를 사용하여 비동기 탐색 이벤트 처리

Router 구성 요소는 OnNavigateAsync 기능을 지원합니다. 사용자가 다음을 수행하면 OnNavigateAsync 처리기가 호출됩니다.

  • 브라우저에서 직접 경로로 이동하여 처음으로 경로를 방문합니다.
  • 링크 또는 NavigationManager.NavigateTo 호출을 사용하여 새 경로로 이동합니다. 이 경로는 개발자 코드에서 호출되어 URI로 이동합니다. [NavigationManager API는 다음 문서 ASP.NET Core Blazor 탐색에 설명되어 있습니다.]
<Router AppAssembly="typeof(App).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        ...
    }
}

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

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        ...
    }
}

OnNavigateAsync를 사용하는 예제는 ASP.NET Core Blazor WebAssembly의 어셈블리 지연 로드를 참조하세요.

서버에서 OnNavigateAsync을(를) 미리 렌더링할 때 두 번 실행됩니다.

  • 요청 시 엔드포인트 구성 요소가 정적으로 첫 번째로 렌더링될 때입니다.
  • 브라우저가 엔드포인트 구성 요소를 두 번째로 렌더링하는 경우입니다.

개발자 코드가 OnNavigateAsync에서 두 번 실행되지 않도록 Routes 구성 요소는 NavigationContext를 수명 주기 메서드 OnAfterRender{Async}에서 사용할 수 있도록 저장할 수 있습니다. 여기서 firstRender를 확인할 수 있습니다. 자세한 내용은 JavaScript interop로 미리 렌더링을 참조하세요.

OnNavigateAsync의 개발자 코드가 두 번 실행되지 않도록 App 구성 요소는 사용할 NavigationContext를 OnAfterRender{Async}(여기서 firstRender를 확인할 수 있음)에 저장할 수 있습니다. 자세한 내용은 JavaScript interop로 미리 렌더링을 참조하세요.

OnNavigateAsync에서의 취소 처리

NavigationContext 콜백에 전달되는 OnNavigateAsync 개체에는 새 탐색 이벤트가 발생할 때 설정되는 CancellationToken이 포함됩니다. 이 취소 토큰이 활성화되면 오래된 탐색에서 OnNavigateAsync 콜백을 계속 실행하지 않도록 OnNavigateAsync 콜백이 ‘throw’ 해야 합니다.

사용자가 엔드포인트로 이동한 후 즉시 새 엔드포인트로 이동하는 경우 앱은 첫 번째 엔드포인트에 대해 OnNavigateAsync 콜백을 계속 실행해서는 안 됩니다.

다음 예제에서

  • 취소 토큰은 사용자가 PostAsJsonAsync 엔드포인트에서 벗어나면 POST를 취소할 수 있는 /about 호출로 전달됩니다.
  • 취소 토큰은 사용자가 /store 엔드포인트에서 벗어나면 제품 프리페치 작업 중에 설정됩니다.
@inject HttpClient Http
@inject ProductCatalog Products

<Router AppAssembly="typeof(App).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/about") 
        {
            var stats = new Stats { Page = "/about" };
            await Http.PostAsJsonAsync("api/visited", stats, 
                context.CancellationToken);
        }
        else if (context.Path == "/store")
        {
            var productIds = new[] { 345, 789, 135, 689 };

            foreach (var productId in productIds) 
            {
                context.CancellationToken.ThrowIfCancellationRequested();
                Products.Prefetch(productId);
            }
        }
    }
}

@inject HttpClient Http
@inject ProductCatalog Products

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

@code {
    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/about") 
        {
            var stats = new Stats { Page = "/about" };
            await Http.PostAsJsonAsync("api/visited", stats, 
                context.CancellationToken);
        }
        else if (context.Path == "/store")
        {
            var productIds = new[] { 345, 789, 135, 689 };

            foreach (var productId in productIds) 
            {
                context.CancellationToken.ThrowIfCancellationRequested();
                Products.Prefetch(productId);
            }
        }
    }
}

비고

NavigationContext에서 취소 토큰이 취소된 경우 이를 처리하지 않으면 이전 탐색의 구성 요소가 렌더링되는 것과 같은 의도치 않은 동작이 발생할 수 있습니다.

<Navigating> 콘텐츠와의 사용자 상호 작용

네트워크 연결이 느리거나, Blazor WebAssembly 앱에서 어셈블리를 지연 로드할 때와 같이 탐색 중에 상당한 지연이 발생하는 경우, Blazor 서버 측 앱 Router 구성 요소는 사용자에게 페이지 전환이 있음을 알릴 수 있습니다.

구성 요소 Router를 지정하는 구성 요소의 맨 위에, 네임스페이스 @using에 대한 Microsoft.AspNetCore.Components.Routing 지시문을 추가하십시오.

@using Microsoft.AspNetCore.Components.Routing

페이지 전환 이벤트 중에 표시할 Navigating 콘텐츠를 매개 변수에 제공합니다.

라우터 요소(<Router>...</Router>) 콘텐츠에서:

<Navigating>
    <p>Loading the requested page&hellip;</p>
</Navigating>

Navigating 속성을 사용하는 예제는 ASP.NET Core Blazor WebAssembly의 어셈블리 지연 로드를 참조하세요.

  • Last updated on