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"
'main'に' window.location.href'を見る条件文を入れてください。条件が合格すれば 'SecondComponent'だけを表示します。 – lux