我正在学习做出反应。我正在管理面板上工作,我必须仅在仪表板、列表、添加等内部页面上显示我的菜单。截至目前,我正在所有页面上显示菜单。我的意思是我在登录页面上,我正在获取菜单。我不想在登录页面上显示菜单。
有没有办法只在特定页面上显示菜单?
我在 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;
我在这里添加了代码。请帮我解决这个问题?
答案 0 :(得分: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