React Router : activeRouteHandler에 소품을 전달할 수 없습니다.

Question

일부 소품을 처리 된 구성 요소로 전달하려고하는데 반작용 라우터가 실패합니다.

var Objects = React.createClass({ 
    getInitialState: function() { 
     return { 
      selected: "All" 
     } 
    }, 
    select: function(opt) { 
     this.setState({ 
      selected: opt 
     }); 
    }, 
    render: function() { 

     return (
      <div> 
       <LeftNav select={this.select} /> 
       <this.props.activeRouteHandler selected={this.state.selected} /> 
      </div> 
     ); 
    } 
}); 



var routes = (
    <Routes> 
     <DefaultRoute name="objects" handler={objecctHandler}/> 
    </Routes> 
); 

URL에 '# /'이 표시되어 라우터가 정상적으로로드됩니다. 왼쪽 탐색 창은 잘 렌더링되고 상태도 업데이트됩니다. 그러나 props.selected는 handeded 구성 요소 즉 objectHandler에 없습니다. 내가 여기서 뭔가를 놓치고 있니? 감사. 나는 반응 라우터 0.7.0

Answer 1

가 'objectHandler'핸들러로 '객체'를 정의하는 다른 경로의 자식에 대한 사항 defaultroute을 시도 사용하고

. 예를 들면 :

var routes = (
    <Routes> 
     <Route handler={Objects}> 
      <DefaultRoute name="objects" handler={objectHandler}/> 
     </Route> 
    </Routes> 
); 

jsfiddle : http://jsfiddle.net/gq1uym5y/1/

Answer 2

내가 지금 사용하고있어이 같은 것입니다.

React.renderComponent(
    <Routes> 
     <Route handler={App}> 
      <Route path="/todos" handler={TodoList} /> 
     </Route> 
    </Routes> 
, mountNode); 

App 구성 요소는 다음과 같습니다 다음 App 구성 요소에 불과 루트가

한 최상위 경로. Container을 모든 서브 루트 (즉, TodoList 경로)에 전달합니다. 이 컨테이너에는 todos (및 새로운 Todos를 추가/유지하기위한 메소드를 포함하여 앱에 필요한 항목) 목록이 들어 있습니다. 이것은 최상위 레벨 및 의 하위 구성 요소 인 하위 구성 요소을 유지하는 의 도움이됩니다. App 구성 요소는 에 사용되기 때문에 경로마다 절대 마운트 해제되지 않으므로 상태가 느슨해지지 않습니다.

var Container = function(app) { 
    return { 
     getTodos: function() { 
      return app.state.todos; 
     } 
    }; 
}; 

var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      todos: ['Buy milk', 'Call Mike'] 
     }; 
    }, 

    componentWillMount: function() { 
     this.container = Container(this); 
    }, 

    render: function() { 
     return <this.props.activeRouteHandler container={this.container} />; 
    } 
}); 

다음은 TodoList의 모습입니다. 사실 두 가지 구성 요소 : TodoList 및 TodoListInner입니다. TodoListInner은 이며 깨끗하고 테스트 할 수있는으로 유지됩니다. TodoList 자체는 쉽게 테스트 할 수 없지만 내부 구성 요소를 감싸기 만하므로 문제가되지는 않습니다.

jsmiff의 솔루션보다 약간 복잡하지만 몇 가지 추가 이점이 있습니다.