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"
'window.location.href'를 보는'Main'에 조건절을 넣으십시오. 조건부가 성공하면'SecondComponent' 만 렌더링합니다. – lux