我正在尝试使用Reactstrap(Bootstrap v4的React组件)和React-Router构建登录/注册界面 . 我在模态上有登录和注册按钮 .

一旦用户点击“登录”或“注册”,我希望模式中的按钮组件被换出输入组件,以便用户可以输入他们的信息 . 我正在尝试使用React-Router执行此操作,以便可以在模态中切换组件,而无需转到新页面或打开新模式 .

这样的事情可行吗?模态当前不会打开新网址,它只显示在现有页面上 . 我在下面包含了我的代码:

Modal Template

<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
               <ModalHeader className="text-center">Get Started</ModalHeader>
               <ModalBody id="ModalBody">
                 <Row id="LoginRow">
                     <Router>
                       <Switch>
                         <Route exact path="/" component={SignUpSignIn} />
                         <Route exact path="/SignUp" component={SignIn} />
                         <Route exact path="/SignIn" component={SignUp} />
                       </Switch>
                     </Router>
                  </Row>
               </ModalBody>
             </Modal>

Base Sign Up / Sign In Component

export default class SignUpSignIn extends Component {
      render () {
        return (
        <div id="SignUpSignInDiv">
          <Col md="12" sm="12" xs="12" className="text-center">
            <Button id="SignUpButton" color="primary" href="/SignUp" onClick={this.toggle}>Sign Up</Button>
           </Col>
           <Col md="12" sm="12" xs="12" className="text-center">
             <Button id="SignInButton" color="primary" href="/SignIn" onClick={this.toggle}>Sign In</Button>
            </Col>
        </div>
        )
      }
}

Sign Up Component

export default class SignUp extends Component {
  render () {
    return (
    <div>
      <Col md="12" sm="12" xs="12" className="text-center">
        <Form />
       </Col>
    </div>
    )
  }
}

Sign In Component

export default class SignIn extends Component {
  render () {
    return (
    <div>
      <Col md="12" sm="12" xs="12" className="text-center">
        <Form />
       </Col>
    </div>
    )
  }
}