如何在一个反应应用程序中处理两个菜单答案

【问题标题】：How to handle two menus in one react application如何在一个反应应用程序中处理两个菜单
【发布时间】：2021-05-09 18:18:20
【问题描述】：

我正在开发应用程序，其中应用程序有两部分，一是面向公共用户和面向管理员用户。我完成了公共方面的工作，但现在我在管理方面面临问题，因为当我为管理员呈现我的第二个菜单时，公共方面的菜单也显示出来了。有人可以帮我如何处理第二个菜单让假设如果用户点击（/admin/home）然后我需要显示第二个菜单如果用户点击（/home）那么我想显示 Ist 菜单。

管理员路由

  <TopMenu>
            <PrivateRoute
              exact
              auth={auth}
              path="/dashboard"
              currentUser={"admin" || null}
              roles={["admin"]}
              component={Dashboard}
            />
          </TopMenu>

公共路线

  <Route exact path="/" render={(props) => <Home {...props} />} />
        <Route
          exact
          path="/about"
          render={(props) => <About {...props} />}
        />
        <Route
          exact
          path="/contact"
          render={(props) => <Contact {...props} />}
        />

【问题讨论】：

您是否尝试过在组件的渲染函数中进行条件渲染？每个页面都可以是它自己的组件，而这些组件又由较小的组件构建。当你在管理页面时，只渲染你需要的组件。
希望看到更多代码。尝试抽象出有关“admin”和“public”的详细信息以及特定于应用程序业务的其他详细信息。您面临的技术问题是什么。

标签： javascript reactjs ecmascript-6 react-router react-router-dom

【解决方案1】：

创建一个私有路由文件并检查用户是否通过身份验证，如果是，则显示该组件，如果不是，则重定向到其他路由你可以这样做或实现你自己的方式

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
export const PrivateRoute = ({
  isAuthenticated,
  component: Component,
  ...rest
}) => (
    <Route {...rest} component={(props) => (
      isAuthenticated ? (
        <div>
          <Component {...props} />
        </div>
      ) : (
          <Redirect to="/" />
        )
    )} />
  );


export default PrivateRoute

在主路由文件中，您可以导入私有路由并像这样使用它

import PublicRoute from './routers/PublicRoute';
import Appp from './components/Appp';
import PrivateRoute from './routers/PrivateRoute';
const store = configureStore();
function App() {
  return (
    <div className="App">
      <Provider store={store}>
        <Switch>
          <PublicRoute path="/" component={HomePage} exact={true} />
          <PrivateRoute path="/yourPrivateRoute" component={yourComponent}/>


        </Switch>
      </Provider>
    </div>
  );
}
export default App;

【讨论】：