React Router V4 : 같은 화면에서 모달을 렌더링하고 URL 만 변경하고 전체 화면을 재구성하는 방법

Question

모달과 비슷한 모달을 구축하려고합니다. 특정 트윗을 표시합니다.

이 스크린 샷은 모달 열 때마다, 상태 코드는 원래의 URL에 추가되는 것을 볼 수 있습니다,하지만 난 같은 화면에 남아에서

1. 

   .
2. 그런 다음 url로 브라우저의 주소창에 붙여 넣으면 I URL을 복사 할 때와 마찬가지로 모달을 열고 과 같은 콘텐츠가로드됩니다.

은 나를 처음 화면으로 덮었습니다. 즉, 동일한 화면에서 모달을로드하고 있습니다. 여기

는

문제는 모달 때 나는 URL이가 만들어지는 것을 즐겨 찾기에 사용자를 위해 가능하게하기 위해 무엇을해야 하는지를 생각이 없다는 것입니다 codesandbox의 반응 라우터 예제 디스플레이 (예에서 /갤러리/IMG/1) 백그라운드에서 동일한 구성 요소 (갤러리 구성 요소) 및 모달 OPE로 페이지를로드 할 수있는 해당 URL을 기반으로 다음

및 엔.

P. codesandbox의 예제에서, 나는 의도적으로 ModalSwitch 구성 요소에 몇 가지 경로를 생략했습니다.

Answer 1

아마 같은 갤러리 구성 요소를 가리키는 두 개의 경로, gallery 및 gallery/img/: id를 만들 수 있습니다. 그런 다음 갤러리 구성 요소의 componentWillMount 동안 URL에 ID 매개 변수가 있는지 확인하고 모달을 렌더링하고로드 할 이미지를 결정할 수 있습니다.

그러면 ModalSwitch 구성 요소를 완전히 제거하고 모달을 닫을 때 사용자를 갤러리 경로로 다시 리디렉션 할 수 있으므로 URL을 항상 정확하게 유지할 수 있습니다.