동적 라우팅 (react router v4)에 대한 모범 사례가 필요합니까?

Question

React Router V4가 잠깐 밖에 나오지 않고 동적 라우팅에 대한 명확한 문서가 없다면 (V3의 transtionsTo(...)에 가깝습니다) 나는이 질문에 대한 간단한 대답이 많은 사람들에게 도움이 될 수 있다고 생각합니다. 그래서 여기에 우리가 간다.

는 다음과 같은 이론적 인 시나리오를 가정 할 수 있습니다 : 하나는 구성이 개 다른 구성 요소 (선택 및 디스플레이)을 포함 컨테이너을 가지고 있습니다. 이제 기능 측면에서 : 컨테이너은 상태가 변경 될 수 있습니다. 선택, 디스플레이은 해당 상태를 기반으로 한 데이터를 표시합니다.

이제 반응 라우터를 통해 상태가 변경되면서 트리거되는 상태는 물론 URL을 어떻게 변경합니까?

보다 구체적인 예는 (React Router V4 - Page does not rerender on changed Route)을 참조하십시오. 그러나 어디서나 질문을 일반화하고 단축해야 할 필요성을 느끼게되었습니다.

Answer 1

씨 내지 [Tharaka Wijebandara은 이러한 문제에 대한 해결책은 다음과 은 컨테이너 성분 용기에 다음 적어도 수행하는 콜백 함수로 선택 성분을 제공 유무 :

props.history.push (Selection coming from Selection);

구성 요소 (Geosuggest라고 함) 선택 아래로는 setLocation 콜백을 전달하는 컨테이너 (라고 Geoselector) 구성 요소의 예를 검색 할 수 있습니다.

class Geoselector extends Component { 
    constructor (props) { 
     super(props); 
     this.setLocation = this.setLocation.bind(this); 
     //Sets location in case of a reload instead of entering via landing 
     if (!Session.get('selectedLocation')) { 
      let myRe = new RegExp('/location/(.*)'); 
      let locationFromPath = myRe.exec(this.props.location.pathname)[1]; 
      Session.set('selectedLocation',locationFromPath); 
     } 
    } 

    setLocation(value) { 
     const newLocation = value.label; 
     if (Session.get('selectedLocation') != newLocation) { 
      Session.set('selectedLocation',newLocation); 
      Session.set('locationLngLat',value.location); 
      this.props.history.push(`/location/${newLocation}`) 
     }; 
    } 


    render() { 
     return (
      <Geosuggest 
       onSuggestSelect={this.setLocation} 
       types={['(cities)']} 
       placeholder="Please select a location ..." 
      /> 
     ) 
    } 
}