Как скрыть элементы навигационной панели при изменении URL-адреса?

Задайте условие в зависимости от местоположения маршрута в 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
       });
    }
}

На панели навигации

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

ОБНОВИТЬ

Оберните свои маршруты компонентом MainLayout, в котором вы определяете компоненты header и footer. Таким образом, вы обновите значение props.location и получите к нему доступ.

  <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

Добавьте также добавьте navbar в компонент заголовка

Если вам нужно быстрое решение. Вы можете просто использовать window.location.pathname, чтобы проверить свой URL-адрес и выполнить некоторые условия, подобные этому

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