私は異なったルートを扱うために反応ルータを使用したい、問題はすべてのルートがそれ自身のhtmlを持っていることです(ブートストラップグリッドシステムを考慮して、everypageは独自のレイアウトを持っています) 異なったhtmlスケルトン異なるルートを作成し、対応するコンテナにコンポーネントを添付しますか? 代わりのソリューションは、すべてのcompnentに一般的なhtmlとput gridを置くことですが、このsoloutionはコンポーネントの再構築性を低下させます どうすればこの問題を克服できますか?異なったhtmlsとルータを反応させる
0
A
答えて
0
あなたのルート設定では、自分自身にレイアウトが含まれているようにする各パスをルートルートにします。サブルートは、ベースコンポーネントからhtmlスケルトンを取得します。
modules.export = [
<Route path="firstSkeleton" component={FirstSkeleton}/>,
<Route path="secondSkeleton">
<Route path="home" component={SecondSkeleton}/>
</Route>,
...
<Route />
]
上記ルートの各
は、ルート要素で定義された独自のレイアウトだ持つことができ、その後、subroutesはそこから買収し、継承します。
0
次は、アプリのルートにあるホームページのホームページ('/'
)の一般的な例です。これは、一般的な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')
)
関連する問題
- 1. ネガティブルックアヘッドのルータを反応させる
- 2. 反応ステータス404と反応ルータとHTMLWebpackPlugin
- 3. 増補反応し、ルータモジュールを反応させ、ルータ中継タイピングで
- 4. 反応ルータを使ってナビゲートする
- 5. カントセットアップ反応ルータ
- 6. 反応し、ルータの異なるクエリ文字列パラメータ
- 7. Gitlabページと反応ルータ
- 8. 反応し、ルータを
- 9. レイアウトを定義するためのベストプラクティス反応ルータと反応するコンポーネント
- 10. 反応ルータが間違ったコンポーネントをマウントする
- 11. 反応ルータのNoMatch
- 12. 反応ルータのデフォルトパスパラメータ
- 13. フェッチデータに反応-ルータ
- 14. 反応ルータのサブドメイン
- 15. ReactJS反応ルータRoutingContext
- 16. 反応ルータのIndexRoute
- 17. ルータを反応させてGETコンフリクトを表現する
- 18. アンドロイドとイオスの反応ネイティブの反応が異なって見える
- 19. 反応ルータv3で経路を一致させる
- 20. は、ルータ4を反応させるの - ルート
- 21. ルータのナビゲーションを半ページで反応させる
- 22. は、ルータ4を反応させるの - ハッシュ
- 23. 流星反応ブートストラップと反応ルータを持つヘッダのアイコン
- 24. 反応ルータwithRouterはルータを注入しません
- 25. 反応ルータとエクスプレスの子ルートがトリガーされない
- 26. 反応-ルータを - サーバーサイド・レンダリング・マッチ
- 27. が反応し、ルータを
- 28. 異なる向きでイオンナビバーを反応させる
- 29. 反応ルータv4でマウントされたコンポーネントをテストする
- 30. 反応ルータでネストされたコンポーネントをナビゲートする方法4
あなたはあなたのHTMLがどのように見えるか気に共有しますか?別のHTMLファイルを持っているのか、JSXを使っているのか分かりません。 –