在React中的一條路線上顯示導航組件

Question

我有一個頂部導航（Home，About，Faq）的應用程序。只有在HOME路線上，我需要將菜單隱藏起來然後顯示在屏幕上。導航內置於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> 
    ) 
    } 
}