반응 라우터를 피하십시오. 응용 프로그램을 나가는 goBack()

Question

바닐라를 사용하고 있습니다. 반응 라우터를 사용하여 간단한 마스터 디테일 SPA를 만들었습니다. 목록 페이지에서 push(*route*)을 사용하여 사용자를 상세보기로 이동 한 다음 상세보기의 뒤로 버튼을 누른 다음 goBack()을 호출하여 사용자를 목록보기로 이동합니다.

push('/list') 대신 goBack() 함수를 사용하는 이유는 사용자가 필터링/페이지 매김 매개 변수 (예 :/list/1/10? q = abc)를 잃지 않고 목록보기로 돌아갈 수 있도록하기 위해서입니다.

내가 가진 문제는 사용자가 브라우저를 시작한 경우입니다. Google은 주소 표시 줄에 상세보기 URL을 복사/붙이면 goBack() 기능은 Google이 그의 마지막 기록 일 때 다시 Google로 가져옵니다.

goBack() 대상을 확인하고 사용자가 응용 프로그램을 종료할지 여부에 따라 goBack()을 수행 할 방법이 있습니까?

Answer 1

라우터를 사용하여 목록 페이지의 쿼리 매개 변수를 상태로 가져올 수 있습니다. 대상 페이지는 세부 정보 페이지가 목록 페이지에서 탐색 된 경우에만 사용할 수 있습니다.

상태는 현재 응용 프로그램 범위에서만 유지됩니다. URL을 다른 브라우저 탭에 복사하면이 상태가 사라집니다.

예 : 목록 페이지 탐색 세부 정보 페이지에

router.push({ 
    pathname: '/users/12', 
    query: { modal: true }, 
    state: { fromDashboard: true } 
}) 

세부 사항 페이지 :

if (this.props.location.state && this.props.location.state.params) { 
    navigateBackUsingParams(this.props.location.state.params); 
} else { 
    navigateBackWithHardcodedUrl(); 
}