React-router: не удалось передать контекст

Question

Я использую дочерний метод контекста, чтобы передать контекст детям приложения.

Контекст Ребенок успешно передается компонента заголовка, но не на Encounter Component. Любая идея для решения этой проблемы. Спасибо.

Применение:

export default class Application extends React.Component { 
constructor(props, context){ 
    super(props); 
    this._onDataReceived=this._onDataReceived.bind(this); 
} 

componentDidMount() { 
PersonalStore._onDataReceived(this._onDataReceived); 
} 

componentWillUnmount() { 
PersonalStore._offDataReceived(this._onDataReceived); 
} 

getChildContext() { 
return { name:"Moussawi7" }; 
} 
renderRouter(){ 
ReactDOM.render((
    <Router> 
    <Route path="/" component={Encounter} /> 
    <Route path="inbox"> 
    <IndexRoute component={Inbox} onEnter={()=>this.refreshScroller()}/> 
    <Route path=":userID" component={Conversation} /> 
    </Route> 
    <Route path="*" component={NotFound} /> 
    </Router> 
),document.getElementById('content')); 
} 

render() { 
    return (
    <div className="container"> 
    <Header/> 
    <div id="content"></div> 
    </div> 
    ); 
} 
_onDataReceived() { 
    this.renderRouter(); 
} 
} 
Application.childContextTypes={ 
name: React.PropTypes.string.isRequired 
} 

Заголовок:

export default class Header extends React.Component { 
    constructor(props,context) { 
    super(props,context); 
    console.log(context);// Object{name:"Moussawi7"} 
    } 
} 
Header.contextTypes= { 
     name: React.PropTypes.string.isRequired 
    } 

Encounter:

export default class Encounter extends React.Component { 
    constructor(props,context) { 
    super(props,context); 
    console.log(context);// Object {name:undefined} 
    } 
} 
Encounter.contextTypes= { 
     name: React.PropTypes.string.isRequired 
    } 

Answer 1

Как Morhause говорит, что это, вероятно, будет ваша проблема. Рекомендуемый способ сделать это заключается в том, что маршрутизатор является базовым элементом, а приложение обертывает другие маршруты. Здесь я обернуть Provider вокруг маршрутизатора, так что все имеет доступ к контексту Поставщика:

// Provider.js Your app context provider 

import React, { Component, PropTypes, Children } from 'react' 

class Provider extends Component { 

    static childContextTypes = { 
     name: PropTypes.string 
    } 

    getChildContext() { 
     return { 
      name: 'Moussawi7' 
     }; 
    } 

    render() { 
     let { children } = this.props; 
     return Children.only(children); 
    } 
} 

// Router.js Your Provider+Router is the first thing rendered on the root, not Application, which is the base route 

ReactDOM.render(
    <Provider> 
     <Router> 
      <Route path='/' component={Application}> 
       <IndexRoute component={Encounter} /> 
       <Route path='users' component={Users} /> 
       <Route path="inbox"> 
        <IndexRoute component={Inbox} onEnter={()=>this.refreshScroller()}/> 
        <Route path=":userID" component={Conversation} /> 
       </Route> 
       <Route path="*" component={NotFound} /> 
      </Route> 
     </Router> 
    </Provider>, 
    document.getElementById('content') 
); 

// Your Application renders the child routes 

class Application extends Component { 

    render() { 
     return (
      <div> 
       <header> 
        <nav> 
         <ul> 
          <li><Link to='/'>Home</Link></li> 
          <li><Link to='/users'>Users</Link></li> 
         </ul> 
        </nav> 
       </header> 
       <div className='route-content'> 
        {this.props.children} 
       </div> 
      </div> 
     ) 
    } 
} 

Примечание я использовал ES7-х static в тех примерах, которые должны были бы Бабель стадия 0 я верю, но вы можете поставить их вне класс.