реагировать маршрутизатор с различными htmls

Question

Я хочу использовать реагирующий маршрутизатор для обработки различных маршрутов, проблема в каждом маршруте имеет собственный html (рассмотрим систему загрузки bootstap, каждая страница имеет свой собственный макет) Можно ли загружать различные html-скелеты для различного маршрута и прикреплять компоненты к соответствующему контейнеру? Альтернативное решение состоит в том, чтобы иметь общий html и помещать сетки в каждый compnent, но это solution понижает компонент reuaabilty Как я могу решить эту проблему?

Answer 1

В вашей конфигурации маршрута просто создайте каждый путь, который вы хотите, чтобы иметь собственный макет с корневым маршрутом. Любые подпункты получат html-скелет из базового компонента.

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

Каждый из вышеуказанных маршрутов может иметь свой собственный макет определяется в корневой компонент, а затем subroutes будет поглощение оттуда и наследовать.

Answer 2

Ниже приведен общий пример блога с домашней страницей в корне вашего приложения ('/'). Он использует общий Layout родительского компонент и гнездится компонент HomePageLayout как ребенок Layout.

При переходе к '/blog', реагировать-маршрутизатор генерирует компонент BlogListLayout внутри из BlogLayout "шаблон" по умолчанию. Если вы перейдете в конкретный блог, такой как '/blog/some-user-blog', BlogEntryLayout будет отображать вместо него, и он все равно будет вложен в шаблон BlogLayout.

'/about' маршрута является примером простой страницы без каких-либо вложенных детей компонентов, но вы можете видеть, как легко вы можете добавить subroutes используя 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') 
)