如何在react js中推送用户登录或注册到首页？

import React, { useState } from 'react';
import axios from 'axios';

const LoginOrRegister = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLoginOrRegister = async () => {
    try {
      // 发送登录或注册请求
      const response = await axios.post('/api/loginOrRegister', {
        username,
        password,
      });

      // 处理服务器响应
      if (response.data.success) {
        // 登录或注册成功，更新首页状态
        // 这里假设首页组件是App，并且有一个updateUser函数用于更新用户登录状态
        App.updateUser(response.data.user);
      } else {
        // 登录或注册失败，显示错误消息
        alert(response.data.message);
      }
    } catch (error) {
      // 处理请求错误
      console.error(error);
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="用户名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLoginOrRegister}>提交</button>
    </div>
  );
};

export default LoginOrRegister;