我正在学习react并试图创建一个登录页面，我使用条件渲染构建了整个系统并开始工作。但我决定我希望能够利用浏览器路由（来回，以及实际拥有路径的好处。例如：/Home always takes you to /Home）
所以我决定使用react-router，我在react router库中尝试了无数不同的选项，但我似乎无法让它工作，我甚至不确定我应该采取哪个方向，因为react router是不同版本和流程的混合和混搭。
这是我目前拥有的（V6），这是我最接近的东西：（注：有些东西可能是我试过的其他东西遗留下来的）
服务器只是返回'通过'或'失败'，我知道这方面的事情是工作。

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {
  RouterProvider,
} from "react-router-dom";
import { router } from "./App";


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RouterProvider router={router} />
);

reportWebVitals();

//App.js
import React, { useState } from "react";
import './App.css';
import {Login, auth} from './Pages/Login';
import Home from './Pages/Home';
import {
  createBrowserRouter,
  redirect,
  useNavigate,
} from "react-router-dom";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "Home",
    element: <Home/>,
    loader: loader
  },
],);

function loader() {
  if (!auth)
  {
    return (
      redirect('/')
    );
  }
}

function App() {

  const [authed, setAuthed] = useState();
  const navigate = useNavigate();

  function callback(res) {
    if (res == 'FAILED')
    {
      alert('FAILED');
      return (
        redirect('/')
      );
    } else if (res == 'PASSED') {
      alert('Passed');
      setAuthed(true);
      auth = true;
      return (
        redirect('/Home')
      );
    }
  }
  
  return(
    <div className='App'>
      <h1>VDSL Control Panel</h1>
      <hr></hr>
      <header>
        <Login handleCallback={callback}/>
      </header>
    </div>
  )
}

//Login.js
import axios from 'axios';

export var auth = false;

export function Login(props) {

  function HandleSubmit(event) {

    //prevent browser from reloading the page
    event.preventDefault();
  
    //read the form data and convert to readable JSON?
    const form = event.target;
    const formData = new FormData(form);
    const formJson = Object.fromEntries(formData.entries());
  
    //Post data to database and Authenticate
    axios.post('http://10.10.47.254:3001/db/login', formJson)
    .then((response) => props.handleCallback(response.data))
    .catch((error) => console.log(error));
  }

  return (
    <div>
      <header>
          <form onSubmit={HandleSubmit} >
            <label>
              Username: <input name='userInput'/>
            </label>
            <br></br>
            <label>
              Password: <input name='passwordInput'/>
            </label>
            <br></br>
            <input type='submit' value='Login' className='Button'/>
          </form>
        </header>
    </div>
  );
}

有了这个，我设法让重定向工作，但只有在加载器功能。所以当我提交我的登录它不重定向。但是如果我尝试直接访问/Home，它会将我重定向到登录（通过应用程序组件）
我试过：
useNavigate（我一辈子都无法开始工作，有时它会让我的屏幕变白色，我可以听到我的CPU负载增加，因为我的风扇声音更大了，直到我重新启动React应用程序才能加载。
重定向（我认为只适用于加载器），
加载器（我不确定如何将加载器连接到我的提交按钮。）
我开始使用旧风格的React路由器与browserroute，路由，路由等无济于事以及。嗯，我得到了路线本身的工作，我只是不知道如何处理我的授权。
我只是想让它在我提交表单时重定向我，我必须使用哪个版本或方法并不重要。我都不知道在这个案子里我该用什么。
提前感谢你花时间看这个并帮助我。
编辑：Drew Reese：

function callback(res) {

    useEffect(() => {
      if (res == 'FAILED')
      {
        navigate('/');

      } else if (res == 'PASSED') {
        alert('Passed');
        navigate('/Home');
      }
    }, [res])
  }

返回错误，我不能在非React组件中使用钩子。我把“callback”改成了“Callback”，它没有出错，但是它没有触发我的任何一条警报消息，所以当我把它变成一个大写的“C”的react组件时，回调就停止工作了？我还在app.js中的Login元素调用中将其更改为“Callback”

function callback(res) {
    alert(res);
    if (res == 'FAILED')
    {
      alert('Failed');
      navigate('/');

    } else if (res == 'PASSED') {
      alert('passed');
      navigate('/Home');
    }
  }

只是没有改变网址或网页在所有，但我得到了‘通过‘警报。