如何在单反应应用程序中获得两种组件结构

Question

我有一个 React 应用程序，我希望如果用户路由以 admin 开头，它应该有一个不同的导航栏

举个例子

正常页面

<NormalNavbar/>

<NormalHeader/>
<NormalBody/>
<NormalFooter/>

但是如果我有管理员路线那我想要

<AdminNavbar/>
<AdminHeader/>
<AdminBody/>
<AdminFooter/>

问题是当我们将它缠绕在路由中然后我们决定加载的正常组件我将粘贴下面的示例

return (
    <div className="App">
      <>
        <Navbar />
        <Routes>
          <Route exact path="/" element={<HomePage />} />
          <Route exact path="/product/:id" element={<ProductPage />} />
          <Route exact path="sarangAdmin/create-product" element={<CreateProduct />} />
          <Route exact path="login" element={<Login />} />
          <Route exact path="profile" element={<Profile />} />
          <Route exact path="register" element={<Register />} />
        </Routes>
        <Footer />
      </>
    </div>
  );

你可以看到我当前的导航栏和页脚是一样的

Answer 1

你可以放置符合条件的元素

{isAdmin? <AdminNavbar> : <NormalNavbar> }

或

在导航栏组件视图中的不同菜单

Answer 2

看到上面的答案很好，但它不是我想要的最佳解决方案，所以我通过查看其他 git 存储库 here is the repository 获得了解决方案，该存储库显示了您应该如何以完美的方式做到这一点 make路由组件结构，然后你可以有条件地渲染它们，在我的情况下我想要这是我问题的最佳解决方案

如何在单反应应用程序中获得两种组件结构

how to get two kinds of components structure in single react app

javascript

reactjs

react-router-dom

react-hooks