React Router - 根组件不会被移除并始终保留在屏幕上

Question

我尝试构建一个显示登录框的演示应用程序，点击后会显示带有基于 React 路由器的导航的内部页面 dom。一切正常，但问题是，当我在绑定到 / 的根组件内导航时，它不会被删除，但始终显示在屏幕上，当我进入第二个组件时，我会同时在屏幕上看到第一个和第二个组件。

我的代码如下

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

尝试在第一个路由元素上使用 exact 属性。问题是当你选择第二个或第三个元素时，第一个匹配路径也是如此，所以每次都会显示。

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

React Router - 根组件不会被移除并始终保留在屏幕上

React Router - root component is not removed and always stays on screen

reactjs

react-router-v4