CODEWITHSUNDEEP
htmlreactjsreact-router
user9437856
user9437856

Reputation: 2388

Menu displaying on all the pages. Is there any way only to display on a specific page in React?

I am learning React. I am working on the admin panel and I have to show my menu on only the inner page like dashboard, list, add, etc. As of now, I am getting the menu on all the pages. I mean I am on the login page and I am getting the menu. I don't want to show the menu on my login page.

Is there any way only to display the menu on a specific page?

I am using the below code in 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;

I added code here:

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

Upvotes: 0

Views: 637

Answers (1)

Taghi Khavari
Taghi Khavari

Reputation: 6582

This is an example of how you can hide left menu in "Login" route, try to implement something like this:

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;

and here is a working sandBox

Upvotes: 1

Related Questions