我正在尝试使用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>
)
}
}