渲染路线条件渲染 . 反应路由器（hashrouter）-Java 学习之路

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

如果仅在主页上显示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仅渲染第一个匹配的路由 .

回复于 2024-05-05T00:36:07+08:00

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

1 回答

相关问题