リアクタ - ルートコンポーネントが削除されず、常に画面に残ります

Question

私は、ログインボックスを表示するデモアプリケーションを作成しようとします。クリックすると、反応ルータのDOMに基づいたナビゲーションが表示されます。すべての問題は機能しますが、問題は、削除されていないルートコンポーネント内をナビゲートするときですが、常に画面に表示され、第2コンポーネントの内部に入ると、同時に第1コンポーネントと第2コンポーネントが同時に表示されます。

私のコードは、最初のルート要素にexactプロパティを使用してみてください

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

に従っています。問題は、2番目または3番目の要素をパスに最初にマッチさせるときに選択するときです。そのたびに表示されます。

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

私はちょうどあなたのコードに追加し、現在その作業を探します

https://codesandbox.io/s/9o1mw8x5rp