異なったhtmlsとルータを反応させる

Question

私は異なったルートを扱うために反応ルータを使用したい、問題はすべてのルートがそれ自身のhtmlを持っていることです（ブートストラップグリッドシステムを考慮して、everypageは独自のレイアウトを持っています） 異なったhtmlスケルトン異なるルートを作成し、対応するコンテナにコンポーネントを添付しますか？ 代わりのソリューションは、すべてのcompnentに一般的なhtmlとput gridを置くことですが、このsoloutionはコンポーネントの再構築性を低下させます どうすればこの問題を克服できますか？

Answer 1

あなたのルート設定では、自分自身にレイアウトが含まれているようにする各パスをルートルートにします。サブルートは、ベースコンポーネントからhtmlスケルトンを取得します。

modules.export = [ 
    <Route path="firstSkeleton" component={FirstSkeleton}/>, 
    <Route path="secondSkeleton"> 
     <Route path="home" component={SecondSkeleton}/> 
    </Route>, 
    ... 
    <Route /> 
] 

上記ルートの各

は、ルート要素で定義された独自のレイアウトだ持つことができ、その後、subroutesはそこから買収し、継承します。

Answer 2

次は、アプリのルートにあるホームページのホームページ（'/'）の一般的な例です。これは、一般的なLayout親コンポーネントを使用し、Layoutの子としてHomePageLayoutコンポーネントを入れ子にします。

あなたは'/blog'に移動

、 反応-ルータは、デフォルトでは BlogLayout "テンプレート" の内部 BlogListLayoutコンポーネントを生成します。 '/blog/some-user-blog'などの特定のブログに行くと、代わりに BlogEntryLayoutがレンダリングされ、それでも BlogLayoutテンプレートにネストされます。

'/about'ルートはありませんネストされた子コンポーネントを持つ単純なページの例ですが、あなたがIndexRoute、よりRouteコンポーネントを使用してsubroutesを追加する方法を簡単に確認することができます。

import ReactDOM from 'react-dom' 
import { Router, Route, IndexRoute, browserHistory } from 'react-router' 

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path='/' component={Layout}> 
     <IndexRoute component={HomePageLayout}/> 
     <Route path='/profile/*' component={ProfilePageLayout}/> 
    </Route> 

    <Route path='/blog' component={BlogLayout}> 
     <IndexRoute component={BlogListLayout}/> 
     <Route path='/*' component={BlogEntryLayout}/> 
    </Route> 

    <Route path='/about' component={AboutLayout}/> 
    </Router>, 
    document.getElementById('app') 
)