我有一个名为Header
它存在于所有路线中,而应用程序的其余部分则发生变化。为了实现这一点,我的主要渲染代码如下所示(使用 ES6):
render(){
return (
<div>
<Header></Header>
<Router>
<Route path="/" component={Home} />
<Route path="/details/:id" component={Details} />
</Router>
</div>
);
}
挑战在于,<Header>
应根据路线略有不同,例如每条路线都有一个唯一的标题。
如何才能实现这一目标?
感谢所有精彩的答案!还在琢磨它们。
为了混合另一个解决方案,我发现我实际上可以在Route
,所以我添加了title
:
<Route title="My Title" component={App} />
我重新调整了我的路由层次结构以将标头包含在Router
(在顶层Route
组件而不是像以前一样在任何路径之外),所以我的主要渲染代码如下所示:
<Router>
<Route component={App}>
<Route path="/" component={Home} title="Home" />
<Route path="/detail/:id" component={Detail} title="Details" />
</Route>
</Router>
And my App
包含标题并传递当前路由的标题:
class App extends React.Component {
render(){
var route = this.props.routes[this.props.routes.length - 1];
return (
<div>
<Header title={route.title} />
{this.props.children}
</div>
)
}
}
但我不能说这是最好的解决方案。我确实喜欢这样,我可以把title
现在在每条路线上,但我担心耦合以及我必须从routes
array.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)