菜单显示在所有页面上。有没有办法只显示在 React 的特定页面上？

Question

我正在学习 React。我在管理面板上工作，我必须只在仪表板、列表、添加等内页上显示我的菜单。截至目前，我在所有页面上都获得了菜单。我的意思是我在登录页面上，我正在获取菜单。我不想在我的登录页面上显示菜单。

有没有办法只在特定页面上显示菜单？

我在 App.js 中使用以下代码

import React from "react";
import {BrowserRouter as Router, Route,Switch  } from "react-router-dom";
import Header_top_menu from "./component/pages/Header-top-menu";
import Header_left_menu from "./component/pages/Header-left-menu";
import Login_emp from './component/pages/Login_emp';
import Employee_list from "./component/pages/Employee/Employee_list";
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import NotFound from "./component/pages/404";



function App(){
    return(
        <Router>
            <Header_top_menu />          {/*top menu*/}
            <div className="bodyWrapper">
            <div className="leftCol h-100 shadow-sm">
            <Header_left_menu />   {/*left menu*/}
            </div>
            <div className="rightCol h-100">
            <div className="bodyInnerWrap mt-5 pt-4 pt-4 pl-4 pr-4">
                <Switch>
                <Route exact path="/" component={Login_emp} />
                <Route exact path="/employeelist" component={Employee_list} />
                <Route component={NotFound} />
                </Switch>
                </div>
            </div>
            </div>
            
        </Router>
    )
}


export default App;

我在这里添加了代码：

https://codesandbox.io/s/recursing-kapitsa-fmq5m

Answer 1

这是一个如何在“登录”路由中隐藏左侧菜单的示例，尝试实现如下所示：

import React, { useEffect, useState } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useRouteMatch
} from "react-router-dom";
import Header_top_menu from "./component/pages/Header-top-menu";
import Login_emp from "./component/pages/Login_emp";
import Employee_list from "./component/pages/Employee/Employee_list";
import Header_left_menu from "./component/pages/Header-left-menu";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import NotFound from "./component/pages/404";

const Menues = () => {
  const [hideMenu, setHideMenu] = useState(false);

  const routeMatch = useRouteMatch();

  useEffect(() => {
    if (routeMatch.path === "/" && routeMatch.isExact) {
      setHideMenu(true);
    }
  }, [routeMatch]);
  console.log("routeMatch is: ", routeMatch);

  return (
    <>
      <Header_top_menu />
      {!hideMenu && (
        <div className="leftCol h-100 shadow-sm">
          <Header_left_menu />
        </div>
      )}
    </>
  );
};

function App() {
  return (
    <Router>
      <div className="bodyWrapper">
        <Menues />
        <div className="rightCol h-100">
          <div className="bodyInnerWrap mt-5 pt-4 pt-4 pl-4 pr-4">
            <Switch>
              <Route exact path="/" component={Login_emp} />
              <Route exact path="/employeelist" component={Employee_list} />
              <Route component={NotFound} />
            </Switch>
          </div>
        </div>
      </div>
    </Router>
  );
}

export default App;

这是一个有效的sandBox