Реактивный маршрутизатор всегда показывает главную страницу

Question

Im пытается внедрить реактивный маршрутизатор в реактивный SPA, чтобы добавить некоторые URL-адреса, но основное приложение просто отображается на каждом настроенном маршруте.

Heres основной код приложения

render: function() { 
     return (

      <div className="row panel panel-default"> 

       <h2 className="text-center">Projects</h2> 

       <ul> 
        <li><Link to="/1">About</Link></li> 
        <li><Link to="/2">Inbox</Link></li> 
       </ul> 

       { 

        <div className="col-md-8 col-md-offset-2"> 

         <Header itemsStore={this.firebaseRefs.items}/> 
         <hr /> 
         <div className={"content " + (this.state.loaded ? 'loaded' : '')}> 
          <List items={this.state.items}/> 
          {this.deleteButton()} 
         </div> 
        </div> 

       } 

       {this.props.children} 

      </div> 
     ) 

    }, 

Answer 1

Ваш <App> компонент должен оказывать примеры this.props.children

var App = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <div id="nav_bar">links links links layout whatever</div> 
       <div id="content"> 
        {/* Route component gets rendered here */} 
        {this.props.children} 
       </div> 
      </div> 
     ); 
    } 
}); 

React-маршрутизатор: https://github.com/reactjs/react-router/tree/master/examples