如何隐藏URL更改上的导航栏项目？

Question

我有一个名为Header的导航栏组件，几乎在我的网络应用程序的每一页都被调用，现在我希望一些导航栏项目在打开某些页面时消失，就像我希望导航项在http://localhost:3000/stories上消失，但必须显示在http://localhost:3000/，我已经附加了图像。例如，我想要“什么是价值”和“价值是如何工作的？”消失在 /stories页面上，我写了一个设置状态函数，这些项目点击后，但他们的工作第二次，当我点击故事导航项目。

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中的Routes.js：

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

Answer 1

如果你想要一个快速的解决方案。您只需使用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>
  )
}

Answer 2

根据组件WillReceiveProps中的路线位置设置条件。

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>

主ayout.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