Question

我尝试构建一个显示登录框的演示应用程序，然后单击显示内部页面，其中包含基于反应路由器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

尝试在第一个路由元素上使用Calendar mStart = (Calendar) today.clone(); // set day to 1 mStart.set(Calendar.DAY_OF_MONTH, 1); // set month to April mStart.set(Calendar.MONTH, Calendar.APRIL); // now mStart is April 1st, we can begin the loop // get the number of days in April int daysInMonth = today.getActualMaximum(Calendar.DAY_OF_MONTH); // loop from day 1 to daysInMonth for (int i = 1; i <= daysInMonth; i++) { // set the day mStart.set(Calendar.DAY_OF_MONTH, i); // add item for the day data.add(createItem(mStart.getTimeInMillis())); } // add all items to cursor cursor.addAll(data);属性。问题是当你选择第二个或第三个元素作为路径的第一个匹配时，所以每次都会显示它。

exact

我只是将其添加到您的代码中，现在查看其工作https://codesandbox.io/s/9o1mw8x5rp

React Router - 根组件未被删除并始终保留在屏幕上

1 个答案: