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

Posted 2023-03-05

【中文标题】菜单显示在所有页面上。有没有办法只显示在 React 的特定页面上？

【英文标题】：Menu displaying on all the pages. Is there any way only to display on a specific page in React?

【发布时间】：2021-04-03 19:52:38

【问题描述】：

我正在学习 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

【问题讨论】：

***.com/questions/50777333/… 这可能会有所帮助

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

【讨论】：

让我试试这个。给我时间

我收到错误 TypeError: useContext(...) is undefined

啊哈，那是因为我们在Router context 之外使用了useLocation。我会改变我的答案

我已经编辑了我的答案并为你添加了一个工作沙盒。看看吧，如果你愿意，请尝试投赞成票 + 接受答案

是的，我检查了沙盒输出它已删除左侧菜单。如何删除 ？我需要在这个 !hideMenu && ( ?