2017-01-06 5 views
0

ここでは私のindex.js次のとおりです。ここでReactJS - バックメインルートに情報を取得します

var routes = require('./config/routes'); 
ReactDOM.render(routes, document.getElementById('app')); 

は私のルートです:

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> 
    ) 
    } 
}); 

ご覧のとおり、すべてのページに共通のコンポーネントが3つあります(HeaderComponent、SecondCom ponentとFooterComponent)。 SecondComponentを隠すために特定のルートが変更されたとき(例えば 'signUp'ルートなど)、私は望みます。 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

'main'に' window.location.href'を見る条件文を入れてください。条件が合格すれば 'SecondComponent'だけを表示します。 – lux

答えて

0

あなたが反応し、ルータからbrowserHistoryを使用してにしているどのルート確認することができます。

FYI、ここに私の設定を反応させています。

関連する問題