URL에없는 라우터에서 React.js 매개 변수를 전달하십시오.

Question

안녕하세요 한 페이지에서 다른 페이지로 이동하여 매개 변수 search 및 type을 전달하고 싶습니다. URL에 이러한 매개 변수가없는 반응 라우터로이 작업을 수행 할 수 있습니까?

나는이 https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments과 해결책을 찾고 있는데, <RouteHandler {...this.props}/>을 사용하고 있지만, urams에 매개 변수를 전달하기 전까지는 작동하지 않습니다.

그 해결책이 있습니까?

편집 1. 경로 : 당신이 언급 한

<Route name="app" path="/" handler={App}> 
    <Route name="realestates" handler={RealEstatesPage}/> 
    <Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler=RealEstatesPage}/> 
    <Route name="realestate" handler={RealEstateDetails}/> 
    <DefaultRoute handler={MainPage}/> 
</Route> 

Answer 1

링크는 두 개의 서로 다른 전략을 설명합니다. 첫째, 동적 세그먼트는 매개 변수화 된 URL 일 뿐이며 매개 변수는 쿼리 문자열 대신 URL 경로의 일부로 전송됩니다. 그래서 이것들은 공개적으로 보일 필요가 있습니다.

둘째, 소품을 사용할 수 있습니다. 이는 상황을 "뒤에서"전달하는 유일한 지원 옵션입니다. 또한 React에서 선호하는 방법입니다. 문제는 이것이 어디에서 일어날 수 있는가하는 것입니다.

하나의 옵션은 최상위 레벨의 값을 Router.run()에서 전달하는 것입니다. 위의 링크에서 중첩 된 각 핸들러는 <RouteHandler search={this.props.search} />과 같이 명시 적으로 소문자를 전달하거나 <RouteHandler {...props} />과 같은 spread attributes을 사용하여 도매합니다.

페이지의 하위 집합에서만 발생하기 때문에 중첩 된 경로를 사용할 수 있습니다. 상위 경로 처리기는 문제의 속성을 상태의 일부로 소유합니다. 그런 다음 위의 경우와 같은 방식으로 정상적인 소품으로 모든 어린이에게 전달합니다.

예를 들어, 경로지도는 다음과 같습니다

<Route name="app" path="/" handler={App}> 
    <Route name="realestates" handler={RealEstatesPage}/> 
    <Route name="realestatesPrefiltered" handler={RealEstatePrefiltered}> 
     <Route name="homes" handler={RealEstateHouseDetails}/> 
     <Route name="apartments" handler={RealEstateHouseDetails}/> 
     <Route name="land" handler={RealEstateLandDetails}/> 
    </Route> 
    <Route name="realestate" handler={RealEstateDetails}/> 
    <DefaultRoute handler={MainPage}/> 
</Route> 

를 그런 다음 RealEstatePrefiltered 구성 요소는 다음과 같습니다

RealEstatePrefiltered = React.createClass({ 
    getInitialState: function() { 
     return { search: '', type: '' }; // Update from store or event. 
    }, 
    render: function() { 
     return <div> 
      <RouteHandler search={this.state.search} type={this.state.type} /> 
     </div>; 
    } 
}); 

이 유일한 질문 왼쪽, 당신은 상태를 어떻게 변경합니까된다 이 구성 요소에? Flux 저장소를 사용하여이 작업을 수행하거나 전역 이벤트를 설정하고이 구성 요소가 변경 사항을 감시하도록 할 수 있습니다.