라우팅 파라미터를 레이아웃으로 넘겨줄 수 있는 방법이 있을까요?

🌐 ASP.NET, Blazor, IIS, 웹 Q&A
1

Blazor WebAssembly 프로젝트의 페이지에서 라우팅 파라미터를 레이아웃으로 넘겨줄 수 있는 방법이 있을까요?
“Stores/{StoreId}/Manage” 경로를 가지는 인덱스 페이지가 있습니다. 하위 페이지들에 대한 NavMenu를 만들고 StoreManageLayout에 두었습니다.
아래는 각 페이지들의 경로 입니다.

  • “Stores/{StoreId}/Manage”
  • “Stores/{StoreId}/Manage/Members”
  • “Stores/{StoreId}/Manage/Products”
@inherits LayoutComponentBase
@layout MainLayout

<MudPaper Width="200px" Class="py-3" Elevation="0">
    <MudNavMenu Bordered="true" Rounded="true">
        <MudNavLink Href="@($"Stores/{StoreId}/Manage/Manage")">홈</MudNavLink>
        <MudNavLink Href="@($"Stores/{StoreId}/Manage/Members")">활동관리</MudNavLink>
        <MudNavLink Href="@($"Stores/{StoreId}/Manage/Products")">부원관리</MudNavLink>
    </MudNavMenu>
</MudPaper>

<MudContainer>
    @Body
</MudContainer>

프로젝트에서 상대 경로를 지원하지 않는지 루트경로에서 라우팅이 되어 모두 절대경로로 지정해주었습니다. 검색을 해보니 index.html에 지정된 <base>의 값을 따라간다고 합니다…

@page "/Stores/{StoreId}/Manage/Manage"
@code {
    [Parameter]
    public required string StoreId { get; set; }
}

페이지에서 라우트 파라미터로 받아온 StoreId를 레이아웃에 있는 NavMenu로 전달해주어야 하는데 어떻게 전달해야 할까요?
검색해보면 많은분들이 비슷한 문제를 겪고 있는것 같은데 해결책을 못찾겠습니다…ㅠㅠ

1 Like
2

Blazor: Access parameter from layout - Stack Overflow

1 Like
3

여러 방법들을 찾아보면서 알려주신 게시글도 봤었습니다.
제가 하고자하는게 어찌보면 웹사이트 구성에서는 많이 필요로 하는 기능입니다.
하지만 게시글에서 나온 해결방법은 필요한 라우트 경로가 생길 때 마다 비하인드 코드를 수정해야되는 조금 번거로움?이 있더라구요. 그래서 Blazor에서 공식적으로 제공하거나 권장하는 방법있는지 궁금한데 비하인드에서 RouteData를 가져오는 방법 외에는 없을까요?

4

이 번거로움은 StoreManageLayout이 태생적으로 라우트 경로에 의존해서 생기는 문제인 듯 보입니다.

이는 보통의 레이아웃이 다른 값에 의존하지 않는 정적인 특징을 보이는 것과 상이합니다.

특정 값에 의존하게 정의해 놓고 그 의존 행태에 따라 코드를 변경하지 않겠다고 하는 것은 좀 이율 배반적인 것 같습니다.

개인적으로는 StoreManageLayout 을 레이아웃이 아닌 템플릿 요소로 정의하는 것이 더 어울릴 것 같다는 생각을 해봅니다.

StoreManageTemplate.razor


@if (StoreId is not null)
{
   <MudPaper Width="200px" Class="py-3" Elevation="0">
       <MudNavMenu Bordered="true" Rounded="true">
           <MudNavLink Href="@($"Stores/{StoreId}/Manage/Manage")">홈</MudNavLink>
           <MudNavLink Href="@($"Stores/{StoreId}/Manage/Members")">활동관리</MudNavLink>
           <MudNavLink Href="@($"Stores/{StoreId}/Manage/Products")">부원관리</MudNavLink>
       </MudNavMenu>
   </MudPaper>
}

<MudContainer>
    @ChildContent
</MudContainer>

@code {

    [Parameter]
    public RenderFragment? ChildContent {get; set; }

    [Parameter][EditorRequired]
    public string? StoreId { get; set; }
}

페이지 요소입니다.

@page "/Stores/{StoreId}/Manage/Manage"

<StoreManageTemplate StoreId="StoreId">
@* 여기에 컨텐츠 *@
</StoreManageTemplate>

@code {
    [Parameter]
    public required string StoreId { get; set; }
}
1 Like
5

감사합니다! 템플릿을 까먹고 있었습니다…

1 Like
6

해결책을 찾으신 것 같지만
NavigationManager.LocationChanged 이벤트를 사용할 수 있습니다.
Layout의 OnInitialized에 NavigationManager.LocationChanged 이벤트를 걸어놓고 쓸 수 있습니다.