javascript - react 路由器需要两次点击来更新路由

Question

我在我的应用程序中使用了react-router v4进行路由。我使用路由来显示各种表单，例如显示公寓表单、体验表单、登录、注册等。

问题

当我单击公寓图像时，将路由器路由 react 为公寓形式。路线变为/apartment。如果我再次单击注册按钮，路线不会更新。我必须双击注册按钮才能更新到/register 的路由。

这是我的代码

class App extends Component {
  constructor(props, context) {
    super(props, context);
    console.log('context', context);
    this.state = { show: false };
  }

  showModal(e) {
    e.preventDefault();
    this.setState({ show: true });
  }

  hideModal() {
    this.setState({ show: false });
  }

  render() {
    return (
        <div className="container-fluid">
          <Nav
            showModal={(e) => this.showModal(e)}
            hideModal={() => this.hideModal()}
            show={this.state.show}
            onHide={() => this.hideModal()}
          />
        </div>
        );
  }
}

App.contextTypes = {
  router: React.PropTypes.object
};



const Nav = (props) => (
  <Router>
    <div>
      <nav className="navbar navbar-default">
        <div className="container-fluid">
          <div className="navbar-header">
            <a className="navbar-brand" href="">
              <img
                alt="Brand"
                className="img-responsive"
                src={logo}
                role="presentation"
              />
            </a>
          </div>
          <div className="collapse navbar-collapse" id="collapse-1">
            <ul className="nav navbar-nav navbar-right nav-social-icon">
              <li className="dropdown">
                <a
                  href=""
                  className="dropdown-toggle"
                  data-toggle="dropdown"
                >
                  ES
                  <span className="caret" />
                </a>
                <ul className="dropdown-menu" style={{ color: '#000', fontWeight: 'bold' }}>
                  <li onClick={() => props.selectedLocale('en')}>
                    en
                  </li>
                  <li onClick={() => props.selectedLocale('es')}>
                    es
                  </li>
                </ul>
              </li>
              <li className="btn-group regLog">
                <button
                  className="btn btn-default"
                  onClick={props.showModal}
                >
                  <Link to={{ pathname: '/signup' }}>
                    {props.intl.formatMessage({ id: 'nav.registration.text' }) }
                  </Link>
                </button>
                <button
                  onClick={props.showModal}
                  className="btn btn-default"
                >
                  <Link to={{ pathname: '/login' }}>
                    {props.intl.formatMessage({ id: 'nav.login.text' }) }
                  </Link>
                </button>
                {props.show ?
                  <ModalForm
                    show={props.show}
                    onHide={props.onHide}
                  /> : <span />
                }
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </Router>
  );


class ModalForm extends Component {
  render() {
    const { show, onHide, intl } = this.props;
    return (
      <Router>
        <Modal
          {...this.props}
          show={show}
          onHide={onHide}
          dialogClassName="custom-modal"
        >
          <Modal.Header closeButton>
            <Link to='/login' className="logTitle">
              <Modal.Title id="contained-modal-title-lg">
                {intl.formatMessage({ id: 'nav.login.text' })}
              </Modal.Title>
            </Link>
            <Link to='/signup' className="logTitle">
              <Modal.Title id="contained-modal-title-lg">
                {intl.formatMessage({ id: 'nav.registration.text' })}
              </Modal.Title>
            </Link>
          </Modal.Header>
          <Modal.Body>
            <Match pattern='/login' component={Login} />
            <Match pattern='/signup' component={Signup} />
          </Modal.Body>
        </Modal>
      </Router>
    );
  }
}

我认为这是因为使用了 onClick 事件和路由。我该如何解决？

更新

我尝试使用路由器上下文，但我得到未定义。 App 是父组件，Nav 是子组件。 Nav 组件使用 router，而 onClick 函数在 App 组件中处理，其中必须处理 this.context.router。

谢谢

Answer 1

使用路由器上下文将重定向放在 onClick 函数上...

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#routercontext

您使用 react 中的 contextTypes 从 react-router 访问 router ，然后使用推送来更改网址