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 stackoverflow.com/a/51389622/10248999 — Usman
– Usman, Commented Aug 20, 2018 at 13:56

CodeZombie · Accepted Answer · 2018-08-20 12:29:29Z

1

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

edited Aug 20, 2018 at 12:29

answered Aug 20, 2018 at 10:32

CodeZombie

2,0973 gold badges19 silver badges30 bronze badges

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

6 Comments

Usman Over a year ago

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 Over a year ago

I am using react-router-dom

Usman Over a year ago

react-router-dom: 4.2.2 this is what i am using

CodeZombie Over a year ago

Ok that's cool.Please share your custom routes.js which handles your components.

Usman Over a year ago

I have added the file coding in my Question..!!

|

Dexter Nunag · Accepted Answer · 2018-08-21 07:01:23Z

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>
  )
}

Collectives™ on Stack Overflow

How to Hide Navbar items on URL Change?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related