React에서 한 경로의 내비게이션 구성 요소를 표시합니다.

Question

상단에 탐색 기능이있는 앱 (집, 정보, 질문)이 있습니다. 홈 루트에서만 메뉴가 숨겨져 있고 스크롤이 나타납니다. 탐색은 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

당신은 현재 location의 pathname 확인 할 수 있습니다

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은 일치 경로로 렌더링 된 구성 요소의 injected prop입니다.

class App extends React.Component { 

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

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