2017-01-06 1 views
0

에 대한 정보를 얻기가 내 index.js :ReactJS - 다시 여기에 주요 통로

var routes = (
    <Router history={hashHistory}> 
    <Route path='/' component={Main}> 
     <IndexRoute component={HomeComponent}/> 
     <Route path='create' component={CreateComponent} /> 
     <Route path='signUp' component={SignUpComponent} /> 
    </Route> 
    </Router> 
); 

그리고 마지막으로 내 주요 컨테이너 (Main.js) :

var Main = React.createClass({  
    render: function() {  
    return ( 
     <div> 
     <NavBarComponent /> 
     <SecondComponent /> 
     {this.props.children} 
     <FooterComponent/> 
     </div> 
    ) 
    } 
}); 
다음
var routes = require('./config/routes'); 
ReactDOM.render(routes, document.getElementById('app')); 

내 경로입니다

보시다시피, 모든 페이지에는 3 가지 공통 구성 요소가 있습니다 (HeaderComponent, SecondCom ponent 및 FooterComponent). 특정 경로가 변경되면 (예 : 'signUp'경로) 'SecondComponent'를 숨기고 싶습니다. https://github.com/ReactTraining/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

을 다음 문자열에 대한 경로를 테스트 :

"react": "^15.4.1", 
"react-dom": "^15.4.1", 
"react-router": "^3.0.0" 
+1

'window.location.href'를 보는'Main'에 조건절을 넣으십시오. 조건부가 성공하면'SecondComponent' 만 렌더링합니다. – lux

답변

0

당신은 반응 라우터에서 browserHistory을 사용하여에있어 어떤 경로를 확인할 수 있습니다

참고로, 여기 내 구성 반응이다.