渲染路线条件渲染。反应路由器(hashrouter)

时间:2018-11-22 23:49:03

标签: reactjs react-router react-router-dom

我正在使用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>

任何帮助表示赞赏。

1 个答案:

答案 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仅呈现第一个匹配的路由。