How to Hide Navbar items on URL Change?

Question

I have a navbar component named Header which is called on almost every page of my web app, now I want some of the navbar items to disappear upon opening certain pages like I want nav items to disappear on http://localhost:3000/stories but must show on http://localhost:3000/, I have attached images. For example I want "what is valu" and "How valu works?" disappear on /stories page I have wrote a set state function on these items upon click, but the they work the second time when I click stories nav item.

operation()
{
  this.setState({showme:false})

}
 <Navbar className="fixed-top navbar-custom" color="white" light expand="lg">
        <Container>
          <NavbarBrand tag={Link} to='/'>
            <img src={logo} alt="logo" className="logo" />
          </NavbarBrand>

          <NavbarToggler onClick={this.toggle} />

          <Collapse isOpen={this.state.isOpen} navbar>
          { this.state.showme?
            <Nav className="mr-auto" navbar style={{cursor:'pointer'}}>
              <NavItem>
              <NavLink onClick={this.scrollToTop} className = "navlink-custom">What is Valu?</NavLink>
                </NavItem> 
              <NavItem>
                <NavLink onClick={this.scrollTo} className = "navlink-custom">How Valu work ?</NavLink>
              </NavItem>
            </Nav>
            :null
          }


            <Nav className="ml-auto" navbar  >
              <NavItem>
                <NavLink onClick={this.operation}  tag={Link} to='/stories' className = "navlink-custom">Stories</NavLink>
              </NavItem>
              <NavItem >
                <NavLink  tag={Link} to='/aboutus' className = "navlink-custom" Link to="/aboutus">About us</NavLink>
              </NavItem>
              <NavItem>
              <Link to="/signup">
                <button className="btn-login">
                  <div className="login">Register/login</div>
                </button>{' '}
                </Link>
              </NavItem>
            </Nav>
          </Collapse>
        </Container>
      </Navbar>

Routes.js In the routes:

    const AppRouter = () =>
    { 
    return ( 
    <Router> 
    <Switch> 
    <Route exact path='/' component={App}/> 
    <Route path='/howvaluworks' component={HowValuWorks} /> 
    <Route path='/Footer' component={footer} /> 
    <Route path='/aboutus' component={AboutUs} /> 
    <Route path='/login' component={loginform}/> 
    <Route path='/signup' component={signupform}/>
    <Route path='/signup' component={signupform}/> 
    <Route path='/profile-tutorial' component={profiletutorial}/> 
    <Route path='/profile-account' component={profileaccount}/> 
    <Route path='/stories' component={stories}/> 
    <Route path='/profilelaunch' component={profilelaunch}/> 
  )};

Its working now thank you so much, I used this link to get route https://stackoverflow.com/a/51389622/10248999 — Usman, Aug 20 '18 at 13:56

CodeZombie · Accepted Answer · 2018-08-20T12:29:29.403

Set the condition based on the route location in the componentWillReceiveProps.

constructor(props){
 super(props);
  this.state = { 
    hideValu : 1
  };
 this.changeNavItem = this.changeNavItem.bind(this);
}

componentDidMount(){
 this.changeNavItem(this.props.location.pathname);
}

componentWillReceiveProps(nextProps){
 if(this.props.location.pathname !== nextProps.location.pathname){
   this.changeNavItem(nextProps.location.pathname); 
  }
}

changeNavItem(currentRoute){
  if(currentRoute == "\stories"){
       this.setState({
          hideValu : 0
       });
    }
}

In the navbar,

{ this.state.showme? <Nav className="mr-auto" navbar style={{cursor:'pointer'}}>
        this.state.hideValu && <div>
          <NavItem>
             <NavLink onClick={this.scrollToTop} className = "navlink-custom">What is 
             Valu?</NavLink>
          </NavItem> 
          <NavItem>
            <NavLink onClick={this.scrollTo} className = "navlink-custom">How Valu 
            work ?
            </NavLink>
          </NavItem>
        </div>
        </Nav>
        :null
      }

UPDATE

Wrap your routes with the component called MainLayout where you define you header and footer component.So that you the props.location value gets updated and you will have access to it.

  <Router>
        <Switch>
         <MainLayout>
            <Route exact path='/' component={App}/>
            <Route path='/howvaluworks' component={HowValuWorks} />
            <Route path='/Footer' component={footer} />
            <Route path='/aboutus' component={AboutUs} />
            <Route path='/login' component={loginform}/>
            <Route path='/signup' component={signupform}/>
            <Route path='/profile-tutorial' component={profiletutorial}/>
            <Route path='/profile-account' component={profileaccount}/>
            <Route path='/stories' component={stories}/>
            <Route path='/profilelaunch' component={profilelaunch}/>
            <Route path='/draft' component={draft}/>
            <Route path='/dashboard' component={dashboard}/>
            <Route path='/launchsurvey' component={launchsurvey}/>
          </MainLayout>
        </Switch>
    </Router>

MainLayout.js

import React from "react"
import Header  from '../containers/Header';
import Footer from "./Footer"

class MainLayout extends React.Component{
  render() {
      return(
         <div>
            <Header />
              <div className="appLayout">
                { this.props.children }
              </div>
            <Footer />
         </div>
      );
  }
}

export default MainLayout

Add also add navbar in the header component

I have added your Code but it says , "pathname" undefined, So where Do I have to initialize this path name, I am new to react so Bare me, If I am being Dumb in this situation. — Usman, Aug 20 '18 at 11:55
Ok that's cool.Please share your custom `routes.js ` which handles your components. — CodeZombie, Aug 20 '18 at 12:11
Your logic is working, but unfortunately its not getting its `path` value... Do you have any other way to do that, I have applied all the changes in project recommended by you !! — Usman, Aug 20 '18 at 13:34

score 0 · Answer 2 · answered Aug 21 '18 at 07:01

If you want a fast solution. You can just use window.location.pathname to check your url and do some conditions like this

    this.state = {
  hideNavItems: false
}

componentDidMount() {
  if (window.location.pathname === '/stories') {
    this.setState({hideNavItems: true});
  }
}

render() {
  return (
    <Navbar className="fixed-top navbar-custom" color="white" light expand="lg">
      <Container>
        <NavbarBrand tag={Link} to='/'>
          <img src={logo} alt="logo" className="logo" />
        </NavbarBrand>

        <NavbarToggler onClick={this.toggle} />

        <Collapse isOpen={this.state.isOpen} navbar>
        { !this.state.hideNavItems 
          ? (<span>
              <Nav className="mr-auto" navbar style={{cursor:'pointer'}}>
                <NavItem>
                  <NavLink onClick={this.scrollToTop} className = "navlink-custom">What is Valu?</NavLink>
                </NavItem> 
                <NavItem>
                  <NavLink onClick={this.scrollTo} className = "navlink-custom">How Valu work ?</NavLink>
                </NavItem>
              </Nav>
            </span>)
          : null
        }


          <Nav className="ml-auto" navbar  >
            <NavItem>
              <NavLink onClick={this.operation}  tag={Link} to='/stories' className = "navlink-custom">Stories</NavLink>
            </NavItem>
            <NavItem >
              <NavLink  tag={Link} to='/aboutus' className = "navlink-custom" Link to="/aboutus">About us</NavLink>
            </NavItem>
            <NavItem>
            <Link to="/signup">
              <button className="btn-login">
                <div className="login">Register/login</div>
              </button>{' '}
              </Link>
            </NavItem>
          </Nav>
        </Collapse>
      </Container>
    </Navbar>
  )
}

How to Hide Navbar items on URL Change?

2 Answers2