Question

我的应用程序顶部有导航（Home，About，Faq）。仅在HOME路线上我需要隐藏菜单然后显示onscroll。导航是在App.jsx中构建的，因此它出现在每个页面上。如何为此特定路线启用显示？

我的揭示组件

   import React, { Component } from 'react';

class NavScroll extends React.Component {
    constructor(props){
      super(props);
      this.state={isHide:false};
      this.hideBar = this.hideBar.bind(this)
    }
    hideBar(){
       let {isHide} = this.state
       window.scrollY > this.prev?
       !isHide && this.setState({isHide:true})
       :
       isHide && this.setState({isHide:false})

       this.prev = window.scrollY;
    }
    componentDidMount(){
        window.addEventListener('scroll',this.hideBar);
    }
    componentWillUnmount(){
         window.removeEventListener('scroll',this.hideBar);
    }
    render(){

        let classHide=this.state.isHide?"hide":""
        return <div className={"fixed "+classHide}>
        </div>;
    }
}

export default NavScroll;

App.jsx

import React, { Component } from 'react';
import NavLink from './global/NavLink.jsx';
import Footer from './global/Footer.jsx';
import NavScroll from './global/NavScroll.jsx';


var App = React.createClass({



  render: function(){

    return (
      <div>
         <div>
          <NavLink to="/"><img className="logo" alt="HOME"></img></NavLink>
          <NavLink to="/about" className="navMenuButton">ABOUT</NavLink>
          <NavLink to="/faq" className="navMenuButton">FAQ</NavLink>
        </div>

        { this.props.children }

        <Footer />

      </div>
    );
  }
});



export default App;

Answer 1

您需要查看当前location的pathname。 location是为匹配路线呈现的组件的injected prop。

class App extends React.Component {

  render() {
    const { location } = this.props

    return (
      <div>
        { location.pathname === '/' ? <HomeNavigation /> : <OtherNavigation /> }
      </div>
    )
  }
}

在React中显示一条路线上的导航组件

1 个答案: