单击按钮时更改路径

Question

在初始点击登录按钮时，我必须显示登录表单。这可以在使用时完成，但它已经被用于显示另一个表单作为默认值。我尝试使用登录按钮在模式框中显示登录默认值，其中有登录和注册选项，使用路由器显示他们的ui。但如果我这样做，模态就不会出现。对不起，由于我的英语不好，这听起来可能让你感到困惑。因此，我正在显示截图以使我的问题清楚。

这是我显示登录和注册框的按钮，以模态显示。当我点击按钮时，弹出模态

现在我点击了我的按钮。让我们说我点击登录然后登录表单应显示为活动/默认，但它显示空模式框

我必须点击iniciar sesion（登录）以显示登录框或注册（注册）以显示注册框。

这是我的代码

nav.js（这是按钮）

<li className="btn-group">
  <button
    className="btn btn-default"
    onClick={props.showModal}
  >
    Regístrate
  </button>
  <button
    onClick={props.showModal}
    className="btn btn-default"
  >
    Iniciar sesión
  </button>
  {props.show ?
    <ModalForm
      show={props.show}
      onHide={props.onHide}
    /> : <span />
  }
</li>

ModalForm.js

<Router>
    <Modal
      {...this.props}
      show={show}
      onHide={onHide}
      dialogClassName="custom-modal"
    >
      <Modal.Header closeButton>
        <Link to='/login'>
          <Modal.Title id="contained-modal-title-lg">Iniciar Sesion</Modal.Title>
        </Link>
        <Link to='/signup'>
          <Modal.Title id="contained-modal-title-lg">Registrase</Modal.Title>
        </Link>
      </Modal.Header>
      <Modal.Body>
        <Match pattern='/login' component={Login} />
        <Match pattern='/signup' component={Signup} />
      </Modal.Body>
    </Modal>
</Router>

简而言之，当点击注册或iniciar sesion时，我如何在模态中显示他们的形式？

反应路由器v4已用于路由