#ctx.location

현재 라우트의 위치 정보이며, React Router의 location 객체와 동일합니다. 보통 ctx.router, ctx.route와 함께 사용되어 현재 경로, 쿼리 문자열, hash 및 라우트를 통해 전달된 state를 읽는 데 사용됩니다.

#적용 시나리오

주의: ctx.location은 라우팅 컨텍스트가 존재하는 RunJS 환경(페이지 내 JSBlock, 이벤트 흐름 등)에서만 사용할 수 있습니다. 순수 백엔드나 라우팅이 없는 컨텍스트(예: 워크플로우)에서는 값이 비어 있을 수 있습니다.

#타입 정의

location: Location;

Location은 react-router-dom에서 제공되며, React Router의 useLocation() 반환 값과 일치합니다.

#주요 필드

#ctx.router, ctx.urlSearchParams와의 관계

ctx.urlSearchParams는 ctx.location.search를 파싱하여 생성됩니다. 쿼리 파라미터만 필요한 경우 ctx.urlSearchParams를 사용하는 것이 더 편리합니다.

#예시

#경로에 따른 분기 처리

if (ctx.location.pathname.startsWith('/admin/users')) {
  ctx.message.info('현재 사용자 관리 페이지입니다');
}

#쿼리 파라미터 파싱

// 방법 1: ctx.urlSearchParams 사용 (권장)
const page = ctx.urlSearchParams.page || 1;
const status = ctx.urlSearchParams.status;

// 방법 2: URLSearchParams를 사용하여 search 파싱
const params = new URLSearchParams(ctx.location.search);
const page = params.get('page') || '1';
const status = params.get('status');

#라우트 이동 시 전달된 state 수신

// 이전 페이지에서 이동 시: ctx.router.navigate('/users/123', { state: { from: 'dashboard' } })
const prevState = ctx.location.state;
if (prevState?.from === 'dashboard') {
  ctx.message.info('대시보드에서 이동해 왔습니다');
}

#hash를 이용한 앵커 위치 확인

const hash = ctx.location.hash; // 예: "#edit"
if (hash === '#edit') {
  // 편집 영역으로 스크롤하거나 해당 로직 실행
}

#관련 정보

• ctx.router: 라우트 탐색 도구입니다. ctx.router.navigate의 state는 대상 페이지에서 ctx.location.state를 통해 가져올 수 있습니다.
• ctx.route: 현재 라우트 매칭 정보(파라미터, 설정 등)이며, 보통 ctx.location과 함께 사용됩니다.