React路由器1.0多個<route/>

Question

如何添加多個根路由？我的登錄頁面的HTML結構比其他認證頁面（儀表板，managesubscription等）

我創建login.jsx財產以後像如下完全不同： -

var React = require('react'); 

var Login = React.createClass({ 
    displayName: 'Login', 
    render() { 
     return (
      <div> 
      <div>Login</div> 
      <form> 
       User Name: <input type="text" name="username"/> 
       Password<input type="password" name="password"/> 
       <input type="submit"/> 
      </form> 
      </div> 

     ); 
    } 
}); 

module.exports = Login; 

Router.js

ReactDOM.render((
    <Router history={History}> 
    <Route path="/" component={App}> 
     <Route path="login" component={Login}/> 
     <Route path="dashboard" component={Dashboard} /> 
     <IndexRoute component={Login}/> 
    </Route> 
    </Router> 
), document.getElementById('tstdiv')); 

app.jsx

var React = require('react'); 
var Router = require('react-router'); 

var App = React.createClass({ 
    render: function(){ 
     return (
      <div> 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 

module.exports = App; 

如何創建AuthenticatedApp.jsx（爲儀表板，管理訂閱），如下所示？

var React = require('react'); 
var Router = require('react-router'); 

var AuthenticatedApp = React.createClass({ 
    render: function(){ 
     return (
      <div> 
      <Header/> 
       {this.props.children} 
      <Footer/> 
      </div> 
     ); 
    } 
}); 

module.exports = AuthenticatedApp; 

Answer 1

一種選擇是改變你的App.jsx弄成這個樣子：

var React = require('react'); 
var Router = require('react-router'); 
var Header = require('path/to/header'); 
var Footer = require('path/to/footer'); 

var App = React.createClass({ 
    render: function(){ 
     if (this.props.location.pathname === '/login') { 
      Header = null; 
      Footer = null; 
     } 
     return (
      <div> 
       <Header /> 
       {this.props.children} 
       <Footer /> 
      </div> 
     ); 
    } 
}); 

基本上，如果它的登錄頁面，我們隱藏頁眉和頁腳，在所有其他情況下（經認證的頁面）將顯示頁眉和頁腳。

但是我有一種感覺，通過改變路由的設置方式來做到這一點，所以我們可以在這個渲染中刪除if條件。