我正在使用React Router的Hashrouter组件在React应用程序中渲染我的不同路由。为了避免重复代码,我创建了几个名为TopBar和Footer的组件,顾名思义,它在网站中呈现了这两个元素。当我想为管理页面添加另一条我不想让TopBar和Footer都不添加的路由时,我的问题就来了。由于该路径与“ /”匹配,因此显然会显示这两个组件以及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>
任何帮助表示赞赏。
答案 0 :(得分:0)
如果仅在首页上显示Topbar和Footer,则可以考虑将TopBar和Footer放在Home组件中的某个位置。如果您仍然需要Topbar和Footer,则可以使用Switch更好地组织路线:
<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>
Switch仅呈现第一个匹配的路由。