渲染路线条件渲染。 反应路由器（hashrouter）

Question

I'm using Hashrouter component of React Router to render my different routes in a React application. In order to avoid duplicating code, I created a couple of components called TopBar and Footer, as the name suggests it renders this two elements in the website. My problem comes when I want to add another route for an admin page which I DON'T WANT to have TopBar neither Footer. Since the path is matching with '/' it is obviously showing both components along with the AdminFrame component.

I have a couple of workaround solutions in mind but I would like to know if there's any plain and easy solution to this problem without changing any route in this structure:

<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>

Any help appreciated.

Answer 1

If the Topbar and Footer is shown only on the homepage, you might consider just putting TopBar and Footer somewhere in the Home component instead. If you still need the Topbar and Footer i'd go with a Switch to organize the routes better:

<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 renders only the first matching route.