Передача реквизитов компонентам-обработчикам с помощью React Router

В приложениях React.js, использующих React Router, вы можете столкнуться со сценариями, в которых вам необходимо передать реквизиты конкретным компонентам-обработчикам . Рассмотрим следующую структуру приложения:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        

            
Some header

    );
  }
});

var routes = (
  
);

ReactRouter.run(routes, function (Handler) {
  React.render(, document.body);
});

Чтобы передать реквизиты компоненту комментариев, вы обычно используете синтаксис типа . Однако этот подход несовместим с React Router, который ожидает, что компоненты-обработчики будут чистыми функциями или компонентами класса.

Одним из решений является создание компонента-оболочки, который инкапсулирует как компонент-обработчик, так и переданные реквизиты:

// CommentWrapper
var CommentWrapper = React.createClass({
  render: function () {
    return ;
  }
});

var routes = (
  
);

В качестве альтернативы вы можете использовать компоненты класса и объект this.props.route для доступа к реквизитам, передаваемым в родительский маршрут:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      

        Index - {this.props.route.foo}
      
    );
  }
}

var routes = (
  
);

Установив свойство foo на маршруте /, вы сможете получить доступ к этому свойству позже в компоненте Index, используя this.props.route.