反応ルータを使用して2ページのサイトを設定する

Question

私は本当に単純な2ページレイアウトを設定しようとしています。ここで

は私のメインのエントリー・ページである：

ReactDOM.render(
    <Router> 
     <Route path="/" component={HomeTheme} /> 
     <Route path="blog" component={BlogTheme} /> 
    </Router> 
     ,rootElement 
); 

私は以下のように、異なるレイアウトで各ルートをレンダリングしたいと思います：

//Main Layout  
render() { 
    return (
     <div> 
      <Header /> 
      <MainNavigation /> 
      <AboutPage /> 
      <SkillsSection /> 
      <ExperienceSection /> 
      <Blog content={this.state.text} /> 
      <Footer /> 
     </div> 
    ); 
} 


//Blog Layout  
render() { 
    return (
     <div> 
      <BlogHeader /> 
      <MainNavigation /> 
      <Footer /> 
     </div> 
    ); 
} 

私が持っている問題は、常にデフォルトのレイアウトですHomeTheme、どのようにリンクごとに異なるコンポーネントを使用できますか？

Answer 1

すべてのルートをレンダリングするには、メインコンポーネント内に{this.props.children}を使用する必要があります。

ルータがこのようなものでなければなりません：あなたのアプリの内部

<Route path="/" component={App}> 
    <IndexRoute component={HomePage}/> 
    <Route path="blog" component={Blog}/> 
    <Route path="registration" component={Registration} /> 
</Route> 

あなたはこのようなものが必要です：

class App extends Component { 
    render() { 
     return {this.props.children}; 
    } 
} 

とインデックスルートの内部を、この場合はホームページであなたは、ナビゲーションを持っている必要がありますルート間をナビゲートします。

import { Link } from 'react-router'; 
class HomePage extends Component { 
    render() { 
    return (<ul> 
       <li><Link to="/">Home</Link></li> 
       <li><Link to="blog">Blog</Link></li> 
       <li><Link to="registration">Registration</Link></li> 
      </ul>) 
    } 
} 

これが役立ちます。