`반응 라우터 '설정을 사용할 때 상태를 구성 요소에 전달하는 방법

Question

정의 된대로 경로 구성을 사용 중입니다. here. 그러나 라우터 구성의이 방법을 사용할 때 어떻게 구성 요소에 소품을 전달합니까? 워드 프로세서에서 다음과 같은 방법을 보면

소품을 제공하는 방법이있을 것 같지 않습니다

const RouteWithSubRoutes = (route) => (
    <Route path={route.path} render={props => (
    // pass the sub-routes down to keep nesting 
    <route.component {...props} routes={route.routes}/> 
)}/> 
) 

이 작동하지 않음 다음과 같은 일을하고. 소품은 다음을 통과하지 못합니다.

{routes.map((route, i) => (
    <RouteWithSubRoutes key={i} user={this.state.user} {...route}/> 
))} 

React의 기본 상태 관리를 사용하고 있습니다. 이것을 위해 Redux가 필요합니까?

Answer 1

다음은 Flux + React를 함께 사용하여 소품을 전달하는 방법의 예입니다. 이것이 당신에게 도움이되기를 바랍니다. 다른 질문이 있으면 알려주세요.

AppComponent.js 당신의 AppComponent에서

, 당신은 당신이 렌더링하는 데 필요한 페이지를 통과해야합니다. 당신의 app.js에서

render() { 
    <div> 
     <Route path="/login" component={Login} /> 
     <Route exact path= "/:date?" component={Dashboard} /> 
    </div> 
} 

구성 요소, 당신은 당신이 필요로하는 모든 서비스, 작업 및 본점 구성 요소를 가져옵니다. 값과 서비스를보다 쉽게 ​​전달할 수 있도록 bottle.js를 확인하십시오. 그러나, 당신은 당신이 AppComponment.js에서 구성 요소 대시 보드와 같은 상위 구성 요소 대시 보드 (및 대시 보드의 자녀 구성 요소)에 AppComponent에 app.js에서 전달 된 데이터를 얻을 수 있도록해야한다

ReactDOM.render(
    (
     <BrowserRouter> 
      <Route path="/" AppStore={AppStore} render={props => <AppComponent {...props} AppStore={AppStore} />} /> 
     </BrowserRouter> 
    ), 
    document.getElementById("view-container") 
); 

렌더링해야합니다.

AppStore의 경우 다른 상점의 컨테이너와 같습니다. 다른 모든 데이터 저장소 구성 요소 및 작업을 가져와야합니다.