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

Question

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

https://stackoverflow.com/questions/50777333/react-hide-a-component-on-a-specific-route this might be helpful — takumon, Dec 26 '20 at 07:34

Taghi Khavari · Accepted Answer · 2020-12-26T11:24:51.357

1

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

edited Dec 26 '20 at 11:24

answered Dec 26 '20 at 11:04

Taghi Khavari

6,272
3
15
32

Let me try this. Give me sometime – user9437856 Dec 26 '20 at 11:09
I am getting error TypeError: useContext(...) is undefined – user9437856 Dec 26 '20 at 11:14
aha, That's because we used `useLocation` outside of `Router context`. I will change my answer – Taghi Khavari Dec 26 '20 at 11:21
I've edited my answer and added a working sand box for you. check it out and if you'd like it, try to give an upVote + accepting the answer – Taghi Khavari Dec 26 '20 at 11:26
Yes, I checked sandBox output It's removed the left menu. How do I remove the ? do I need to add inside this {!hideMenu && ( ? – user9437856 Dec 26 '20 at 11:45
yes you can do that too, I've just showed you an example of how to hide a menu – Taghi Khavari Dec 26 '20 at 11:51
Cool. I got your point. Thank you so much for your help. Upvote from my side. – user9437856 Dec 26 '20 at 11:54
Glad you'd liked it – Taghi Khavari Dec 26 '20 at 12:00

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

1 Answers1