React路由器：無法將道具傳遞給activeRouteHandler

Question

我試圖將一些道具傳遞給我處理的組件，但是react-router沒有這樣做。

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> 
); 

路由器加載正常，因爲我現在可以在網址中看到'＃/'。左側導航欄呈現正常，並更新狀態。但是在被調用的組件即objectHandler中沒有選擇props.我在這裏錯過了什麼嗎？謝謝。

我使用的反應路由器0.7.0

Answer 1

嘗試使默認路由的「objectHandler」定義「對象」作爲處理另一條路線的孩子。如：

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路由）。這個容器包含待辦事項列表（以及我在應用中需要的任何內容，包括添加/持久化新待辦事項的方法）。這有助於保持頂級的狀態和解耦子組件。由於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本身並不容易測試，但由於它只是圍繞內部組件，所以這應該不成問題。

var TodoListInner = React.createClass({ 
    render: function() { 
     <ul> 
      {this.props.todos.map(function(todo) { 
       return <li>{todo}</li>; 
      })} 
     </ul> 
    } 
}) 

var TodoList = React.createClass({ 
    render: function() { 
     <TodoListInner todos={this.props.container.getTodos()} /> 
    } 
}); 

這比jsmiff的解決方案稍微複雜一些，但是這項工作有一些額外的好處。