How to hide header component in login page reactJS

Question

Am new to ReactJS. I want to hide header component in Login page and show in inner pages. I have an App.js I have used ternary operator but not working.

class App extends Component {
    render(){
    let HideHeader = EmployeeLogin ? null : <HeaderNavContainer />
        return (
            <div>
                <Router history={history}>
                    <div>                    
                        {HideHeader}
                        <Switch>
                            <Route path="/about" component={About} />
                            <Route path="/EmployeeLogin" component={EmployeeLogin} />                        
                            <Route path="/MyPreferences" component={MyPreferences} />                        
                            <Route component={PageNotFound} />
                        </Switch>    
                    </div>    
                </Router>
            </div>
        );
    }
}

If EmployeeLogin component is rendered I want to hide header navigation <HeaderNavContainer /> if not I want to show <HeaderNavContainer />

Roy Wang · Accepted Answer · 2018-05-04 07:24:11Z

15

In the render method of your HeaderNavContainer, you can do this:

render() {
  if (window.location.pathname === '/EmployeeLogin') return null;
  return <insert your header nav code>;
}

Since HeaderNavContainer is wrapped within <Router>, it'll re-render when window.location.pathname changes.

Alternatively, add HeaderNavContainer to your About, MyPreferences etc instead of putting in App.

answered May 4, 2018 at 7:24

Roy Wang

11.3k2 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

swapnil2993 · Accepted Answer · 2018-05-04 07:24:24Z

4

In component you can check if the history.location.pathname is equal to /EmployeeLogin and then return null. You can use withReducer for getting history object as a prop.

render(){
  if(this.props.history.location.pathname==='/EmployeeLogin'){
    return null;
  }   
  return (//your navigation component code.)
}

answered May 4, 2018 at 7:24

swapnil2993

1,39411 silver badges16 bronze badges

Comments

P S Nirmal · Accepted Answer · 2018-05-04 07:42:08Z

1

Instead of checking component exists or not try to check the URL is hit or not

In window.location.pathname you will get the current URL.

let HideHeader = window.location.pathname === 'your need string' ? null :

answered May 4, 2018 at 7:42

P S Nirmal

611 silver badge6 bronze badges

Comments

Deepak Singh · Accepted Answer · 2022-08-22 07:30:58Z

0

Create a HideHeader route that renders (conditionally) the Header component and an Outlet component for the nested route components.

import { Outlet, useLocation } from "react-router-dom";
import { Header } from "./Header";

const HideHeader = ({ hideHeaderPaths }) => {
const { pathName } = useLocation();

return (
 <>
   {!hideHeaderPaths.includes(pathName) && <Header />}
   <Outlet />
 </>
 );
};

export default HideHeader;

In App.js

import your HideHeader.js

import HideHeader from "./common/HideHeader"
...
...
<Route element={<HideHeader hideHeaderPaths={["/login"]} />}></Route>

and import your header on those pages where you want to show

<Header />

answered Aug 22, 2022 at 7:30

Deepak Singh

1,1879 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to hide header component in login page reactJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related