Javascript 注册和登录组件之间的路由

这是我的内容包装器，它将显示

SignUp

组件或

SignIn

组件

const Content = (props) => {
    return (
        <div className="wrapper">

                <SignIn/>
                <SignUp/>

        </div>
    )
};
export default Content;

const SignIn = () => {
    return (
        <div className="sign-up">
            <h1>Sign In</h1>
            <Form>
                <Form.Group controlId="email">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control type="email" placeholder="Enter email"/>
                    <Form.Text className="text-muted">
                    </Form.Text>
                </Form.Group>

                <Form.Group controlId="password">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password"/>
                </Form.Group>
                <Form.Group controlId="formBasicCheckbox">
                    <Form.Check type="checkbox" label="Remember me"/>
                </Form.Group>
                <Button variant="primary" type="submit">
                    Sign In
                </Button>
                <hr/>
                <p>If you don't have an account, Sign Up</p>
            </Form>

        </div>
    )
};
export default SignIn;

const Content=（道具）=>{
返回(
)
};
导出默认内容；

这是我的注册组件

class SignUp extends React.Component {
    state = {
        email: '',
        username: '',
        password: '',
        second_password: '',
        showModal: false,
        modalMessage: '',
        modalHeader: ''
    };
    handleSubmit = async (event) => {
        event.preventDefault();

        const emailValidated = await this.validateEmail(this.state.email);
        const usernameValidated = this.validateUsername(this.state.username);
        const passwordValidated = this.validatePassword(this.state.password, this.state.second_password);
        if (emailValidated === true){
            if(usernameValidated === true){
                if(passwordValidated === true){
                    const registrationComplete = await this.register(this.state.email, this.state.username, this.state.password);
                    if (registrationComplete === true) {
                        this.setState(prevState => ({
                            ...prevState,
                            showModal: true,
                            modalMessage: "Please check your mail to activate your account",
                            modalHeader: "Success!"
                        }));
                    }else{
                        this.setState(prevState => ({
                            ...prevState,
                            showModal: true,
                            modalMessage: "Something went wrong with the registration. Please try again later.",
                            modalHeader: "Failure!"
                        }));
                    }
                }else{
                    this.setState(prevState => ({
                        ...prevState,
                        showModal: true,
                        modalMessage: "Passwords do not match",
                        modalHeader: "Failure!"
                    }));
                }

            }else{
                this.setState(prevState => ({
                    ...prevState,
                    showModal: true,
                    modalMessage: "Username should be a minimum of 8 characters long",
                    modalHeader: "Failure!"
                }));
            }

        }else{
            this.setState(prevState => ({
                ...prevState,
                showModal: true,
                modalMessage: "An account with that email already exists.",
                modalHeader: "Failure!"
            }));
        }

    };
    validateUsername = (username) => {
        return username.trim().length >= 8;
    };

    validatePassword = (password, second) => {
        return password.trim() === second.trim();
    };

    validateEmail = async (email) => {
        const resp = await axios({
            method: 'post',
            url: 'bouncr/user/exists',
            data: {"email": email}
        });
        return resp.status === 200
    };

    register = async (email, username, password) => {
        const resp = await axios({
            method: 'post',
            url: 'bouncr/user/register',
            data: {'email': email, 'username': username, 'password': password}

        });
        return resp.status === 201
    };
    onClose = () => {
        this.setState(prevState => ({...prevState, showModal: false, modalMessage: '', modalHeader: ''}));
    };

    render() {
        return (
            <div>
                <CustomModal
                    showModal={this.state.showModal}
                    onClose={this.onClose}
                    modalMessage={this.state.modalMessage}
                    modalHeader={this.state.modalHeader}
                />

                <div className="register">
                    <h1>Sign Up</h1>
                    <Form onSubmit={this.handleSubmit}>
                        <Form.Group controlId="email">
                            <Form.Label>Email address</Form.Label>
                            <Form.Control type="email"
                                          placeholder="Enter email"
                                          value={this.state.email}
                                          onChange={event => this.setState({email: event.target.value})}/>
                            <Form.Text className="text-muted">
                                Please make sure you've access to this mail. You'll receive an activation code here.
                            </Form.Text>
                        </Form.Group>

                        <Form.Group controlId="username">
                            <Form.Label className="form-label">Username</Form.Label>
                            <Form.Control type="text"
                                          placeholder="Username"
                                          value={this.state.username}
                                          onChange={event => this.setState({username: event.target.value})}/>
                            <Form.Text className="text-muted">
                                Please make it atleast 8 characters long.
                            </Form.Text>
                        </Form.Group>

                        <Form.Group controlId="password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password"
                                          placeholder="Password"
                                          value={this.state.password}
                                          onChange={event => this.setState({password: event.target.value})}/>
                            <Form.Text className="text-muted">
                                Please make sure it's atleast 8 characters long and uses a mix of letters and numbers.
                            </Form.Text>
                        </Form.Group>

                        <Form.Group controlId="confirmPassword">
                            <Form.Label>Confirm Password</Form.Label>
                            <Form.Control type="password"
                                          placeholder="Password"
                                          value={this.state.second_password}
                                          onChange={event => this.setState({second_password: event.target.value})}/>
                        </Form.Group>


                        <Button variant="primary" type="submit">
                            Sign Up
                        </Button>
                        <hr/>
                        <p onClick={() => this.props.setIsNew(false)}>
                            If you don't have an account, Sign Up
                        </p>
                    </Form>
                </div>
            </div>
        );
    }
}

export default SignUp;

类注册扩展了React.Component{
状态={
电子邮件：“”，
用户名：“”，
密码：“”，
第二个密码：“”，
showModal：错，
modalMessage:“”，
modalHeader:“”
};
handleSubmit=异步（事件）=>{
event.preventDefault（）；
const emailValidated=等待this.validateEmail（this.state.email）；
const usernameValidated=this.validateUsername（this.state.username）；
const passwordValidated=this.validatePassword（this.state.password，this.state.second\u密码）；
如果（emailValidated==真）{
如果（usernameValidated==true）{
if（passwordValidated==true）{
const registrationComplete=等待this.register（this.state.email、this.state.username、this.state.password）；
如果（注册完成===真）{
this.setState（prevState=>({
…国家，
是的，
modalMessage：“请检查您的邮件以激活您的帐户”，
modalHeader：“成功！”
}));
}否则{
this.setState（prevState=>({
…国家，
是的，
modalMessage：“注册出现问题。请稍后再试。”，
modalHeader：“失败！”
}));
}
}否则{
this.setState（prevState=>({
…国家，
是的，
modalMessage：“密码不匹配”，
modalHeader：“失败！”
}));
}
}否则{
this.setState（prevState=>({
…国家，
是的，
modalMessage：“用户名长度至少应为8个字符”，
modalHeader：“失败！”
}));
}
}否则{
this.setState（prevState=>({
…国家，
是的，
modalMessage：“已存在该电子邮件的帐户。”，
modalHeader：“失败！”
}));
}
};
validateUsername=（用户名）=>{
返回username.trim（）.length>=8；
};
validatePassword=（第二个密码）=>{
返回密码.trim（）==second.trim（）；
};
validateEmail=async（电子邮件）=>{
const resp=等待axios({
方法：“post”，
url:“bouncer/user/exists”，
数据：{“电子邮件”：电子邮件}
});
返回响应状态===200
};
注册=异步（电子邮件、用户名、密码）=>{
const resp=等待axios({
方法：“post”，
url:'buuncer/user/register'，
数据：{'email'：电子邮件，'username'：用户名，'password'：密码}
});
返回相应状态===201
};
onClose=（）=>{
this.setState（prevState=>（{…prevState，showmodel:false，modalMessage:''，modalHeader:''}））；
};
render（）{
返回(
注册
电子邮件地址
this.setState（{email:event.target.value}）}/>
请确保您有权访问此邮件。您将在此处收到激活码。
用户名
this.setState（{username:event.target.value}）}/>
请使它至少有8个字符长。
暗语
this.setState（{password:event.target.value}）}/>
请确保它至少有8个字符长，并且使用字母和数字的混合。
确认密码
this.setState（{second_password:event.target.value}}/>
注册

this.props.setIsNew（false）}>
如果您没有帐户，请注册

);
}
}
导出默认注册；

这是信号部分

const Content = (props) => {
    return (
        <div className="wrapper">

                <SignIn/>
                <SignUp/>

        </div>
    )
};
export default Content;

const SignIn = () => {
    return (
        <div className="sign-up">
            <h1>Sign In</h1>
            <Form>
                <Form.Group controlId="email">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control type="email" placeholder="Enter email"/>
                    <Form.Text className="text-muted">
                    </Form.Text>
                </Form.Group>

                <Form.Group controlId="password">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password"/>
                </Form.Group>
                <Form.Group controlId="formBasicCheckbox">
                    <Form.Check type="checkbox" label="Remember me"/>
                </Form.Group>
                <Button variant="primary" type="submit">
                    Sign In
                </Button>
                <hr/>
                <p>If you don't have an account, Sign Up</p>
            </Form>

        </div>
    )
};
export default SignIn;

const SignIn=（）=>{
返回(
登录
电子邮件地址
暗语
登录

如果您没有帐户，请注册

)
};
导出默认签名；

我想让按钮下面的文本路由到相关的c

const SignUp = ({setIsNew}) => {
  return (
    <div className="sign-up">
      <h1>Sign In</h1>
      <Form>
        <Form.Group controlId="email">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Enter email" />
          <Form.Text className="text-muted"></Form.Text>
        </Form.Group>
        <Form.Group controlId="username">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Username" />
          <Form.Text className="text-muted"></Form.Text>
        </Form.Group>

        <Form.Group controlId="password">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>

        <Form.Group controlId="confirmPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Confirm Password" />
        </Form.Group>
        <Button variant="primary" type="submit">
          Sign In
        </Button>
        <hr />

        <p onClick={() => setIsNew(false)}>
          If you don't have an account, Sign Up
        </p>
      </Form>
    </div>
  );
};
export default SignUp;