渲染路由条件渲染。反应路由器（哈希路由器）

Question

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

任何帮助表示赞赏。

Answer 1

如果 Topbar 和 Footer 仅显示在主页上，您可以考虑将 TopBar 和 Footer 放在 Home 组件中的某个位置。如果您仍然需要顶部栏和页脚，我会使用 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 只渲染第一个匹配的路由。