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-адресе. Левый навигатор отлично отображает и обновляет состояние. однако в поданном компоненте нет реквизита, а именно objectHandler. Я что-то упустил? Благодарю.

Я использую реагировать-маршрутизатор 0.7.0

Answer 1

Попробуйте делает DefaultRoute для «objectHandler» дочерний другой маршрут, который определяет «объекты» в качестве обработчика. Такие, как:

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

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

Answer 2

То, что я использую сейчас что-то вроде этого.

Один верхний маршрут уровня, который только маршруты к App компонента:

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

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 не так легко проверить, но поскольку он просто обтекает внутренний компонент, это не должно быть большой проблемой.

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, но делает работу с некоторыми дополнительными преимуществами.