React Router - Root-Komponente wird nicht entfernt und bleibt immer auf dem Bildschirm

Question

Ich versuche, eine Demo-App zu erstellen, die Login-Box zeigt und auf Klick zeigt interne Seite mit Navigation basierend auf reagieren Router dom. Jedes Ding funktioniert, aber das Problem ist, dass, wenn ich innerhalb der Wurzel-Komponente navigiere, die an/nicht entfernt wird, aber immer im Bildschirm angezeigt wird und wenn ich innerhalb der zweiten Komponente gone, sehe ich die erste und zweite Komponente auf dem Bildschirm gleichzeitig.

Mein Code folgt

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var {HashRouter, Route, IndexRoute, Link} = require('react-router-dom'); 

require('style-loader!bootstrap/dist/css/bootstrap.css') 
require(__dirname + '/public/style.css') 

var Main = React.createClass({ 
    getInitialState: function() { 
    return { 
     result: false 
    }; 
    }, 
    handleNewValue: function (result) { 
    this.setState({ 
     result: result 
    }) 
    }, 
    render: function() { 
    return (
    <div> 
     <Container onLoginValue={this.handleNewValue} isLoggedIn={this.state.result}/> 
     </div> 
    ) 
    } 
}); 

var Container = React.createClass({ 
    onLogin: function (result) { 
    this.props.onLoginValue(result) 
    }, 
    render: function() { 

    var that = this 
    var isLoggedIn = this.props.isLoggedIn 

    function resolveLogin() { 
     if (isLoggedIn) { 
     return <ContentArea/> 
     } else { 
     return <LoginBox onLogin={that.onLogin} /> 
     } 
    } 

    return (
     <div> 
     {resolveLogin()} 
    </div> 
    ); 
    } 
}); 

var LoginBox = React.createClass({ 
    onLoginButton: function (e) { 
     e.preventDefault(); 
     this.props.onLogin(true) 
    }, 
    render: function() { 
     return (
     <div> 
     <div className="center-vertically"> 
     <div className="container"> 
      <div className="col align-items-center"> 
      <div className="row"> 
      <div className="well col-sm-3 col-sm-offset-5"> 
       <form onSubmit={this.onLoginButton}> 
       <div className="form-group"> 
        <label htmlFor="email">Логин:</label> 
        <input type="email" className="form-control" id="email"></input> 
       </div> 
       <div className="form-group"> 
        <label htmlFor="pwd">Пароль:</label> 
        <input type="password" className="form-control" id="pwd"></input> 
       </div> 
        <button type="submit" className="btn btn-default">Войти</button> 
       </form> 
       </div> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
    ) 
    } 
}) 

var ContentArea = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <HashRouter> 
      <App/> 
     </HashRouter> 
     </div> 
    ) 
    } 
}) 

var App = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <Nav/> 
     <Route path="/" component={First} /> 
     <Route path="/second" component={Second} /> 
     <Route path="/third" component={Third} /> 
     </div> 
    ) 
    } 
}) 

var Nav = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <Link to="/">First</Link> 
     <Link to="/second">Second</Link> 
     <Link to="/third">Third</Link> 
     </div> 
    ) 
    } 
}) 

var First = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h1>First!</h1> 
     </div> 
    ) 
    } 
}) 

var Second = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h1>Second!</h1> 
     </div> 
    ) 
    } 
}) 

var Third = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h1>Third!</h1> 
     </div> 
    ) 
    } 
}) 

ReactDOM.render(
    <Main/>, 
    document.getElementById('app') 
) 

Answer 1

Try exact Eigenschaft auf dem ersten Streckenelement zu verwenden. Das Problem ist, wenn Sie das zweite oder dritte Element als ersten Pfad auswählen, so wird es jedes Mal angezeigt.

var App = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <Nav /> 
     <Route path="/" exact component={First} /> 
     <Route path="/second" component={Second} /> 
     <Route path="/third" component={Third} /> 
     </div> 
    ) 
    } 
}) 

Ich füge es nur, um Ihren Code und sieht jetzt seine Arbeit https://codesandbox.io/s/9o1mw8x5rp