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

Question

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

让我们以为例

正常页面

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

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

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

问题是，当我们将其缠绕在Routes内时，我们决定加载的正常组件，我将粘贴下面的示例

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存储库来获得解决方案。这里是一个存储库，它显示了你应该如何以完美的方式来完成它，使路由组件结构，然后你可以有条件地呈现它们，在我的情况下，这是我想要的问题的最优化解决方案