渲染路由条件渲染。React路由器(hashrouter)
渲染路由条件渲染。React路由器(hashrouter)
提问于 2018-11-22 23:49:03
我正在使用React Router的Hashrouter组件在React应用程序中呈现我的不同路由。为了避免重复代码，我创建了几个名为TopBar和Footer的组件，顾名思义，它在网站中呈现这两个元素。当我想为管理页面添加另一个路由时，我的问题就来了，我既不想有TopBar，也不想有页脚。由于路径与“/”匹配，因此显然显示了这两个组件以及AdminFrame组件。
我有几个变通的解决方案，但我想知道是否有任何简单和简单的解决方案来解决这个问题，而不改变这个结构中的任何路线：
<HashRouter>
<div>
<Route path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={() => (
<Home />
)} />
<Route exact path="/contacto" render={() => (
<Contact />
)} />
<Route path="/" render={()=> (
<Footer/>
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
</div>
</HashRouter>感谢您的帮助。
回答 1
Stack Overflow用户
发布于 2018-11-22 23:59:45
如果顶栏和页脚只显示在主页上，您可以考虑将Topbar和页脚放在主页组件中的某个位置。如果你仍然需要顶栏和页脚，我会使用一个开关来更好地组织路由：
<HashRouter>
<div>
<Route exact path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={()=> (
<Footer/>
)} />
<Switch>
<Route path="/contacto" render={() => (
<Contact />
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
<Route path="/" render={() => (
<Home />
)} />
</Switch>
</div>
</HashRouter>交换机仅呈现第一个匹配的路由。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53439184
复制
相似问题
使用React路由器进行条件渲染
React路由器渲染
React路由器渲染道具
ReactJS和React路由器中的条件路由和条件渲染
使用react路由器渲染页面
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
