Question

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

用户点击其中任何一个＆＃34;登录＆＃34;或者＆＃34;注册＆＃34;，我希望将模态中的按钮组件换出输入组件，以便用户可以输入他们的信息。我正在尝试使用React-Router执行此操作，以便可以在模态中切换组件，而无需转到新页面或打开新模式。

这样的事情可行吗？模态当前不会打开新网址，它只显示在现有页面上。我在下面提供了我的代码：

模态模板

 <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>

基本注册/登录组件

    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>
        )
      }
}

注册组件

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

登录组件

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

我可以使用React-Router在打开的模式中渲染组件吗？

0 个答案: