반응 라우터를 사용하여 중첩 된 구성 요소를 렌더링하는 방법

Question

이것은 noob 질문입니다. 난 반응 isomorphic - starterkit 상용구 (https://github.com/RickWong/react-isomorphic-starterkit)를 사용하여 보편적 인 반응 응용 프로그램을 개발하고 있습니다. 왼쪽에 "고정 된"세로 막대를 만들고 오른쪽에있는 기본 컨테이너의 자식에 렌더링 된 다른 페이지에 대한 링크를 포함합니다.

routes.js

module.exports = (
    <Router history={browserHistory}> 
     <Route path="/" component={Main}> 
      <Route path='/inbox' component={Inbox} /> 
     </Route> 
    </Router> 
); 

Main.js

export default class Main extends React.Component { 
    constructor(props, context){ 
     super(props,context); 
     console.log('Main props', props); 
     console.log('Main context', props); 
    } 
    /** 
    * componentWillMount() runs on server and client. 
    */ 
    componentWillMount() { 
     if (__SERVER__) { 
      console.log("Hello server"); 
     } 

     if (__CLIENT__) { 
      console.log("Hello client"); 
     } 
    } 

    /** 
    * Runs on server and client. 
    */ 
    render() { 
     return (
       <App/> 
     ) 
    } 
} 

App.js

class App extends React.Component{ 

    constructor(props, context) { 
    super(props, context); 
    console.log('App props ', props); 
    } 

    render(){ 
    return (
     <div> 
      <Sidebar/> 
      <RightContent /> 
     </div> 
    ) 
    } 

} 

RightContent.js : 여기에 내 코드입니다

class RightContent extends React.Component{ 
    render(){ 
    return (
     <div id="b" style={{backgroundColor:"#EEF0F4", width:"100%"}}> 
     <NavBar /> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

문제이다 : 나는 <Link to="..."> 태그로 사이드 바 클릭하면받은 편지함 구성 요소 (간단한 <div>)가 렌더링되지 않습니다. 다음과 같은 것이 올바른지 나는 모른다 : 당신이 볼 수 있듯이 App.js 클래스 생성자는 props 변수를 출력하지만 ... 출력은 undefined이다. 그러나 Main.js 소품이 제대로 인쇄됩니다. 반응 라우터 버전은 2보다 큽니다. 아무도 도와 줄 수 있습니까?

Answer 1

App까지 소품을 전달하지 않으므로 위치 컨텍스트를 사용하지 않는 한 소품을 가져올 수 없습니다.

당신이해야 ...

render() { 
    return (
    <App {...this.props}/> 
) 
} 

그런 다음 중첩 된 경로 (들)을 렌더링하기 위해 App에 this.props.children에 액세스 할 수 있어야합니다. 당신은 ...

render(){ 
    return (
    <div> 
     <Sidebar/> 
     <RightContent> 
     {this.props.children} 
     </RightContent> 
    </div> 
) 
} 

워드 프로세서에서 자습서를 참조하십시오 ... 너무 RightContent에서 지정하는 https://github.com/reactjs/react-router/blob/master/docs/Introduction.md#with-react-router