React Router를 사용하여 핸들러 구성 요소에 Prop 전달

React Router를 활용하는 React.js 애플리케이션에서는 특정 핸들러 구성 요소에 Prop을 전달해야 하는 시나리오가 발생할 수 있습니다. . 다음 애플리케이션 구조를 고려하십시오.

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

Comments 구성 요소에 prop을 전달하려면 일반적으로 와 같은 구문을 사용합니다. 그러나 이 접근 방식은 핸들러 구성 요소가 순수 함수 또는 클래스 구성 요소일 것으로 기대하는 React Router와 호환되지 않습니다.

한 가지 해결책은 핸들러 구성 요소와 전달된 소품을 모두 캡슐화하는 래퍼 구성 요소를 만드는 것입니다.

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

var routes = (
  
    
    
  
);

또는 클래스 구성요소와 this.props.route 객체를 활용하여 상위 경로에 전달된 props에 액세스할 수 있습니다.

class Index extends React.Component { 

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

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

var routes = (
  
);

/ 경로에 foo prop을 설정하면 나중에 this.props.route를 사용하여 Index 구성 요소 내에서 prop에 액세스할 수 있습니다.