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를 함께 사용하여 계층적인 라우트 구조를 구성할 수 있습니다.