Question

我有一个名为Header的导航栏组件，几乎在我的Web应用程序的每个页面上都会调用它，现在我希望某些导航栏项在打开某些页面时消失，就像我希望导航项在http://localhost:3000/stories上消失一样，但是必须显示在http://localhost:3000/上，我已附加图像。例如，我想要“什么是价值”和“价值如何发挥作用？”消失在/ stories页面上单击时，我已在这些项目上编写了一个set state函数，但是当我单击故事导航项目时，它们将第二次运行。

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 在路线中：

    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

根据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添加到标题组件中

Answer 2

如果您想快速解决。您可以只使用window.location.pathname来检查您的网址并执行类似这样的条件

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

如何在网址更改时隐藏导航栏项目？

2 个答案: