플러터 라우팅 (go_router) 개념

화면 이동·URL 관리. React Router에 해당하는 개념. (일반 개념 정리)

go_router = Flutter의 표준 라우터

Flutter 기본 내비게이션(Navigator)은 화면을 스택에 쌓는 저수준 방식이라, 화면이 많아지면 관리가 어렵다. go_router는 URL 기반으로 화면 지도를 선언하는 라이브러리로, React Router와 개념이 거의 같다.

핵심 구성요소

final router = GoRouter(
  initialLocation: "/splash",   // 첫 화면
  redirect: (context, state) { ... },  // 검문소 (로그인 가드 등)
  routes: [
    GoRoute(path: "/login", builder: (c, s) => LoginPage()),
  ],
);

요소	뜻	React Router 비유
GoRouter	라우터 본체 (전체 화면 지도)	createBrowserRouter
GoRoute	화면 하나 (path + 그릴 위젯)	<Route path element>
initialLocation	앱 켜면 첫 화면	초기 경로
redirect	이동 전 검문소 (조건부 돌려보내기)	loader / guard

중첩 라우트 — URL 계층 = 화면 계층

GoRoute(path: "/onboard",           // /onboard
  routes: [
    GoRoute(path: "login",           // /onboard/login
      routes: [
        GoRoute(path: "pwd-reset"),  // /onboard/login/pwd-reset
      ]),
  ]),

routes: 안에 GoRoute를 넣으면 URL이 부모/자식으로 쌓인다. 화면 흐름이 곧 URL 구조가 된다. React Router의 nested routes와 동일.

ShellRoute — 공통 레이아웃 껍데기

여러 화면을 공통 UI로 감싸는 라우트. 예: 하단 탭바를 유지한 채 안쪽 화면만 바뀌기, 또는 전역 팝업을 얹기.

ShellRoute(
  builder: (c, s, child) => Scaffold(bottomNavigationBar: ..., body: child),
  routes: [ ...탭 화면들... ],
)

Next.js의 layout.tsx가 하위 페이지를 감싸는 것과 같은 개념.

화면 이동 방법 (go vs push vs replace)

메서드	동작	뒤로가기
`context.go("/home")`	해당 위치로 이동 (스택 교체)	이전으로 못 감
`context.push("/detail")`	위에 쌓기	뒤로가기 가능
`context.replace(...)`	현재 화면을 바꿔치기	현재만 대체

이름 기반 버전도 있다: context.goNamed("home"), context.pushNamed("detail"). 이 프로젝트는 각 페이지에 routeName/routeURL 상수를 두고 이름 기반으로 이동한다.

데이터 넘기기

URL 파라미터: /device/:id → 다음 화면에서 state.pathParameters['id']
객체 통째로: context.push("/detail", extra: myObject) → state.extra

React Router의 URL 파라미터 + location.state에 해당.