reactjs - 如何在 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.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}/> 
  )};

标签： reactjsreact-routerreact-redux

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头组件中添加