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

Posted 2023-02-22

【中文标题】如何在一个反应​​应用程序中处理两个菜单

【英文标题】：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”的详细信息以及特定于应用程序业务的其他详细信息。您面临的技术问题是什么。

【参考方案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;