Blazor 코드에서 페이지 이동 처리하기

Blazor는 기본 라우팅이 아주 쉽게 되어 있는데 그중 페이지 이동을 처리하는 방법을 알아보겠습니다.

 

페이지 이동은 NavigationManager를 이용해서 하면 되는데 이 객체를 인젝트(Inject)를 이용해서 주입해서 사용하면 됩니다.

 

우성 페이지를 만들어 봅시다 

 

추가 => 레이저 컴포넌트이름.razor

추가 => 레이저 컴포넌트.razor.cs

이렇게 레이저와 같은 이름으로 추가한 뒤에 Partial Class로 선언하면 자동으로 페이지의 코드 비하인드를 클래스와 따로 분리할 수 있습니다.

이러면 F7를 이용해서 자유롭게 이동하면서 코딩할 수 있습니다.

 

그런 뒤 button이나 a 태그를 만들어서 클릭 후 이동할 태그를 만들어 줍니다.

 

속성에 @onclick="Home" 이렇게 주면 해당 태그를 클릭했을 때 코드 비하인드의 해당 함수가 호출되게 됩니다.

 

이제 중요한 코드 비하인드에서 코드를 확인해 보겠습니다.

 

public partial class PortfolioWebsite
    {
        [Inject]
        public NavigationManager NavigationManager { get; set; }
        protected override void OnInitialized()
        {
            
        }

        protected void Home()
        {
            NavigationManager.NavigateTo("/");
             
        }
    }

위의 코드를 보시면 Inject속성을 이용하여 NavigationManager객체를 선언하면 페이지 로드 시 자동으로 해당 객체가 주입되게 됩니다. 이때 NavigationManager의 함수 NavigationTo함수를 이용해서 이동할 페이지를 넣어주면 해당 태그를 클릭했을 때 코딩된 페이지로 이동하게 됩니다.