Question

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

问题

当我点击公寓图片时，将路由器路线反应到公寓表格。路线变成/公寓。如果我再次点击注册按钮，路线不会更新。我必须双击注册按钮才能更新到/ 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事件和路由。我该如何解决？

更新

我尝试使用路由器上下文，但我得到了undefined。 App是父组件，Nav是子组件。导航组件使用路由器，而onClick功能在App组件中处理，其中必须处理this.context.router。

由于

Answer 1

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

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

您使用contextTypes中的react从router访问react-router，并使用push来更改网址

Answer 2

我也在使用RRv4来处理按钮链接，然后我将button包裹在link中。将整体点击处理程序放在链接上。这应该在转换之前调用，如果您需要阻止转换，只需拨打e.preventDefault

即可

这将保持RRv4的声明性质，并且无需在反应中使用实验context功能。

反应路由器需要两次点击才能更新路由

2 个答案: