與不同的htmls反應路由器

Question

我想使用react路由器來處理不同的路由，問題是每個路由都有它自己的html（考慮bootstap網格系統，everypage有它自己的佈局） 是否有可能加載diffrent html骨架不同的路線和附加組件到相應的容器？ 另一種解決方案是在每個組件中都放置一個通用html並放入網格，但這種解決方案會降低組件的可返回性 我該如何解決這個問題？

Answer 1

在你的路由配置中，只是讓每個你想擁有自己的路徑都包含一個根路由。任何子路徑都會從基礎組件獲取html骨架。

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

上述各路線的可以有它在根組件中定義自己的佈局，然後將子路徑將接管從那裏並繼承。

Answer 2

以下是博客的主頁的一般示例（'/'）。它採用了通用Layout父組件和巢HomePageLayout成分爲Layout一個孩子。

當您導航到'/blog'，反應路由器默認生成的BlogLayout「模板」內的BlogListLayout組件。如果您轉到特定博客（例如'/blog/some-user-blog'），則將呈現，但它仍將嵌套在模板中。

的'/about'路線是沒有嵌套子組件的簡單頁面的一個例子，但你可以看到如何容易，你可以使用IndexRoute多Route組件添加子路徑。

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') 
)