が反応 - 表紙を私はこのようなシンプルなレイアウト持たルート

Question

に基づく：

<div id='App'> 
    <CoverPage src={this.props.route.cover} /> 
    {this.props.children} 
    <Sidebar /> 
</div> 

と反応し、ルータがこのように構成された：

<Router history={browserHistory}> 
    <Route name="home" path="/" cover="/images/covers/home.jpg" component={App}> 
     <IndexRoute component={HomeRoute} /> 
    </Route> 
    <Route name="register" path="/register" cover="/images/covers/register.jpg" component={App}> 
     <IndexRoute component={RegisterRoute} /> 
    </Route> 
</Router> 

これは、これを行うための正しい方法は何ですか？それは、私が家に帰るときにページ全体を再びレンダリングするように見えますが、それ以外の方法では（???）ではありません。私は何が間違っているのか理解できないほど緑色です。

（私が今まで、サーバー側のレンダリングを実装しようとする場合、これは最も明白な解決策のように見える）

Answer 1

一般ルーティングはアプリケーションがであなたのトップレベルのコンポーネントであり、この

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
    <IndexRoute component={IndexComponent} /> 
    <Route path="path_one" component={PathOneComponent} /> 
    <Route path="path_two" component={PathTwoComponent} /> 
    </Route> 
</Router> 

のようなものを設定されていますこれをレンダリングメソッドの中に入れ、他のコンポーネントはその内部にレンダリングします。

export default class App extends Component { 
    /* ... */ 
    render() { 
    return (
     <div> 
     <CoverPage src={this.props.route.cover} /> 
      {this.props.children} 
     <Sidebar /> 
     </div> 
    ); 
    } 
} 

http://host/ - >アプリケーション

内部IndexComponent

http://host/path_oneのレンダリング - >アプリケーション

など内部PathOneComponentをレンダリング...

希望これははい、私はこれを取得