使用@ aws-amplify和react时从自定义组件更改身份验证状态

如何解决使用@ aws-amplify和react时从自定义组件更改身份验证状态

我正在尝试将Amplify Auth与React应用程序集成。

我正在使用@ aws-amplify / ui-react包中的AmplifyAuthenticator自定义身份验证流程。

尽管我可以使用AmplifySignIn组件并对其进行自定义，但我想创建一个完全自定义的代替AmplifySignIn。

以下是我的自定义组件的外观：

import React from 'react';
import { Auth } from 'aws-amplify';
import { useForm } from "react-hook-form";

export default function CustomSignIn(props){


    const { register,reset,errors,handleSubmit } = useForm();

    const onSubmit = async data => {
       
        await Auth.signIn(data.username,data.password);
       
    };

    return(
        <form className="mt-5" onSubmit={handleSubmit(onSubmit)} slot={props.slot}>
            <h4>Login</h4>
            <p>Need an account? <span>Create an account</span></p>

            <div className="form-group">
                <label>Email address</label>
                <input type="username" name="username" className="form-control" ref={register({required: true})}/>
            </div>
            <div className="form-group">
                <label>Password</label>
                <input type="password" name="password" className="form-control"  ref={register({required: true})}/>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Continue</button>
        </form>
    );

}

以下是我尝试管理身份验证状态的方法：

import React,{useEffect} from 'react';
import { AmplifyAuthenticator } from '@aws-amplify/ui-react';
import '../styles/App.scss';
import { AuthState,onAuthUIStateChange } from '@aws-amplify/ui-components';
import ProtectedRoutes from './ProtectedRoutes';
import logo from '../assets/logo.svg';
import CustomSignIn from '../modules/auth/CustomSignIn';

function App() {

  const [authState,setAuthState] = React.useState();
  const [user,setUser] = React.useState();

  useEffect(() => {

      return onAuthUIStateChange((nextAuthState,authData) => {
          setAuthState(nextAuthState);
          setUser(authData)
      });

  },[]);

  
  return ( authState === AuthState.SignedIn && user ) 
  ? 
  (
    <ProtectedRoutes />
  ) 
  : 
  (
    <div className="container-fluid container-fluid--auth">
      <div className="row">
        <div className="col-md-8">
          <div className="row">
            <div className="col-12 py-3">
              <img className="logo" src={logo} alt="logo" />
            </div>
          </div>
          <div className="row">
            <div className="col-md-4 offset-md-4">
              <AmplifyAuthenticator>
                <CustomSignIn slot="sign-in" />
              </AmplifyAuthenticator>
            </div>
          </div>
        </div>
        <div className="col-md-4 col--auth-sidebar">

        </div>
      </div>
    </div>
  );

} 


export default App;

问题是，当用户单击“登录”页面上的“创建帐户”按钮时，如何将用户带到“登录”页面？