는 라우터 설정은 반응

Question

는 다음 사항을 고려 어떤 경로를 통해 모달 표시 지원 라우터 경로 구성을 반응한다. 지금 당장은 Redux 스토어에서 modal 속성으로 관리하고 있습니다. Root 구성 요소 (<Route path="/" component={Root}>)는이 속성을 확인하고 필요한 경우 모달을 렌더링합니다.

React Router를 통해이 작업을 수행 할 수 있습니까? 그래서 오히려 내 REDUX 저장소에 modal 속성을 유지하는 것보다, 그냥 /users#modal 또는 /users/modal 같은 것을 탐색하고 (<Route path="/users" component={UserList}/>에 정의 된대로) 렌더링 UserList 구성 요소와 모달 구성 요소 방법의

Answer 1

한 모두를 얻을 수 있습니다 당신 개별 구성 요소의 componentDidMount에서 위치 해시를 확인하는 것입니다.

componentDidMount() { 
     if (window.location.hash) { 
      const hash = window.location.hash.substring(1); 
      if (hash === "modal") { 
      //show your modal here. 
      } 
     } 
    } 

모든 구성 요소가 이러한 방식으로 작동해야하는 경우 모든 구성 요소를 공통 기본 클래스에서 상속받을 수 있습니다.