gorouter에서 ShellRoute,NestedRoute 뭐야

열심이·2023년 4월 10일

Flutter의 GoRouter 패키지는 애플리케이션 내에서 라우팅 및 탐색을 처리하는 데 사용되는 라이브러리입니다. 이 라이브러리에서 ShellRoute와 NestedRoute는 라우트 구성의 다른 형태입니다.

ShellRoute:
ShellRoute는 라우트 구조의 상위 수준을 나타냅니다. 여기서 셸이라는 용어는 앱의 골격 또는 전체 레이아웃을 의미합니다. 이 레이아웃은 일반적으로 앱 바, 탭 바, 드로어 등과 같은 공통 UI 요소를 포함합니다. ShellRoute를 사용하여 공통 요소를 공유하는 하위 페이지를 그룹화할 수 있습니다.
예를 들어, 다음과 같이 ShellRoute를 사용하여 앱의 메인 섹션을 정의할 수 있습니다.

GoRoute(
  path: '/main',
  pageBuilder: (context, state) => MaterialPage(child: MainLayout()),
  routes: [
    // Nested routes go here
  ],
),

NestedRoute:
NestedRoute는 ShellRoute 내에서 정의된 하위 라우트를 나타냅니다. 이 라우트는 ShellRoute에 정의된 공통 레이아웃 내에서 페이지를 표시하는 데 사용됩니다. NestedRoute를 사용하여 ShellRoute의 일부인 페이지들을 정의할 수 있습니다.
예를 들어, 다음과 같이 NestedRoute를 사용하여 메인 섹션 내에서 여러 페이지를 정의할 수 있습니다.

GoRoute(
  path: '/main',
  pageBuilder: (context, state) => MaterialPage(child: MainLayout()),
  routes: [
    GoRoute(
      path: 'dashboard',
      pageBuilder: (context, state) => MaterialPage(child: DashboardPage()),
    ),
    GoRoute(
      path: 'profile',
      pageBuilder: (context, state) => MaterialPage(child: ProfilePage()),
    ),
  ],
),

이 예에서, /main/dashboard 및 /main/profile 경로로 탐색할 때 앱은 공통 레이아웃(MainLayout) 내에서 대시보드 및 프로필 페이지를 각각 표시합니다. 이 방식으로 ShellRoute와 NestedRoute를 함께 사용하여 계층적인 라우트 구조를 구성할 수 있습니다.

profile
열심이하는자

0개의 댓글