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

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

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

虽然我可以使用AmplicateSignin组件并对其进行自定义，但我想创建一个完全自定义的组件，而不是AmplicateSignin

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

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

}

从“React”导入React；
从'aws amplify'导入{Auth}；
从“react hook form”导入{useForm}；
导出默认功能CustomSignIn（道具）{
常量{register，reset，errors，handleSubmit}=useForm（）；
const onSubmit=异步数据=>{
等待身份验证登录（data.username、data.password）；
};
返回(
登录
需要帐户吗？创建帐户

电子邮件地址
密码
继续
);
}

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

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;

import React，{useffect}来自“React”；
从'@aws amplify/ui react'导入{AmplifyAuthenticator}；
导入“../styles/App.scss”；
从'@aws amplify/ui components'导入{AuthState，onAuthUIStateChange}；
从“/ProtectedRoutes”导入ProtectedRoutes；
从“../assets/logo.svg”导入徽标；
从“../modules/auth/CustomSignIn”导入CustomSignIn；
函数App（）{
const[authState，setAuthState]=React.useState（）；
const[user，setUser]=React.useState（）；
useffect（（）=>{
返回authuistateChange（（nextuthState，authData）=>{
setAuthState（下一个州）；
setUser（authData）
});
}, []);
返回（authState===authState.SignedIn&&user）
? 
(
) 
: 
(
);
} 
导出默认应用程序；

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