Показывать навигационный компонент по одному маршруту в Реагировании

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

Вы хотите, чтобы проверить pathname текущего location. location - это injected prop компонента, отображаемого для согласованного маршрута.

class App extends React.Component { 

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

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