我想使用react路由器来处理不同的路由,问题是每个路由都有自己的html (考虑引导网格系统,每个类型都有自己的布局)是否可以为不同的路由加载diffrent html框架并将组件附加到相应的容器上?另一种解决方案是有一个通用的html并在每个组件中放置网格,但是这个解决方案降低了组件的可靠性--我如何克服这个问题?
发布于 2016-03-21 10:23:20
在您的路由配置中,只需将您希望拥有自己的包含布局的每条路径设置为根路由即可。任何子路由都将从基本组件中获取html框架。
modules.export = [
<Route path="firstSkeleton" component={FirstSkeleton}/>,
<Route path="secondSkeleton">
<Route path="home" component={SecondSkeleton}/>
</Route>,
...
<Route />
]
上面的每条路由都可以在根组件中定义自己的布局,然后子路由将从那里接管并继承。
发布于 2016-03-22 09:46:17
下面是一个在应用程序('/'
)根部有主页的博客的一般示例。它使用泛型Layout
父组件,并将HomePageLayout
组件嵌套为Layout
.的子组件。
当您导航到react-router时,默认情况下,BlogListLayout
在BlogLayout
“模板”中生成BlogLayout
组件。如果您访问特定的博客(如BlogEntryLayout
),则将呈现'/blog/some-user-blog'
,并且它仍将嵌套在BlogLayout
模板中。
IndexRoute
路由是一个简单页面的示例,没有嵌套的子组件,但是您可以看到使用Route
和更多的'/about'
组件添加子路由是多么容易。
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')
)
https://stackoverflow.com/questions/36136669
复制相似问题