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

Question

我有一个顶部有导航的应用程序（主页、关于、常见问题）。只有在 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>
    )
  }
}