Страница входа React.js не отправляется на страницу профиля

Я пытаюсь создать страницу входа, и она не отправляет пользователя на страницу профиля, когда я вхожу в систему. Это руководство, которому я пытался следовать: https://dev.to/oyedeletemitope/login-authentication-with- реакция-и-фастапи-397b .

Мой код входа

import React from 'react'
import {  useState } from 'react';
import axios from 'axios';
import { fetchToken, setToken } from './Auth'
import { useNavigate } from "react-router";
function Login() {
  
    const navigate = useNavigate();
    const [usernamelog,setUsernamelog]=useState('');
    const [passwordlog,setPasswordlog]=useState('');
    
    const [loginStatus,setLoginStatus]=useState('')
    
    const login=()=>{
      console.info('login clicked')
      
      if ((usernamelog == "") & (passwordlog == "")) {
        return;
      } else {
      
      axios.post('http://localhost:4060/login',{
         
      
          username:usernamelog,
          password:passwordlog,
          
        }).then(function (response) {
          console.info(response.data.token, "response.data.token");
          if (response.data.token) {
            setToken(response.data.token);
            navigate("/profile");
          }
        })
        .catch(function (error) {
          console.info(error, "error");
        });

       }
      };
  
    return (
    <div className='Login' >
          <h2>Login</h2>
         
          <div >
          {fetchToken() ? (
            <p>you are logged in</p>
          ) : (
            <div>
              <form>
                <label >Input Username</label>
                <input
                  type = "text"
                  onChange = {(e) => setUsernamelog(e.target.value)}
                />

                <label >Input Password</label>
                <input
                  type = "text"
                  onChange = {(e) => setPasswordlog(e.target.value)}
                />

                <button onClick = {login}>Login</button>
              </form>
            </div>
          )}
        </div>

     </div>
  )
}

export default Login;

Мой код аутентификации

import { useLocation,Navigate } from "react-router-dom"

export const setToken = (token)=>{

    localStorage.setItem('temitope', token)// make up your own token
}

export const fetchToken = (token)=>{

    return localStorage.getItem('temitope')
}

export function RequireToken({children}){

    let auth = fetchToken()
    let location = useLocation()

    if (!auth){

        return <Navigate to='/' state  = {{from : location}}/>;
    }

    return children;
}
export default fetchToken

Код моего профиля

import { useNavigate } from "react-router";
export default function Profile() {
  const navigate = useNavigate();

  const signOut = () => {
    localStorage.removeItem("temitope");
    navigate("/");
  };

  return (
    <>
      <div style = {{ marginTop: 20, minHeight: 700 }}>
        <h1>Profile page</h1>
        <p>Hello there, welcome to your profile page</p>

        <button onClick = {signOut}>sign out</button>
      </div>
    </>
  );
}

мой основной код приложения

import './App.css';

import * as yup from "yup";
import {userSchema} from './Validations/UserValid'
import { RequireToken } from "./components/Auth";
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';
import Home from './components/Home'; 
import Login from './components/login';
import Register from './components/register';
import Profile from './components/Profile';
function App() {
 
  
  

  const createUser= async (event) =>{
    event.preventDefault();
    let formData  = {
    firstname: event.target[0]?.value,
    lastname: event.target[1]?.value,
    organization: event.target[2]?.value,
    email: event.target[3]?.value,
    password: event.target[4]?.value,
    };
    const isValid= await userSchema.isValid(formData);
    console.info(isValid);

  };

 
  return (
    <div className = "App">
        <h1>Our Future Reads</h1>
          
        <Router>
        <Routes>
          <Route path  = "/" element = {<Home />}/>
          <Route path  = "/login" element = {<Login/>}/>
          <Route path = "/register" element = {<Register />} />
          <Route
  path = "/profile"
  element = {
    <RequireToken>
      <Profile />
    </RequireToken>
  }
/>
         
        </Routes>
        
      </Router>
          
          
     
    </div>
  );
}

export default App;

и вот мой соответствующий внутренний код

router= APIRouter(tags=["Authentication"])

@router.post('/login')
def login(request:OAuth2PasswordRequestForm = Depends(), db: Session = Depends(database.get_db) ):
    user = db.query(models.User).filter(models.User.email == request.username).first()
    if not user:
         raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail= f"Invalid Credentials")

    if not Hash.verify(user.password, request.password):
        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND,detail= f"Invalid password" )   
    
    
    access_token = token.create_access_token(data = {"sub": user.email})
    return {"access_token": access_token, "token_type": "bearer"}

Я не уверен, что я делаю неправильно. Кажется, я не получаю никаких ошибок, и у меня были небольшие проблемы с пониманием руководства во время аутентификации. Любая помощь будет принята с благодарностью, и я буду рад добавить дополнительную информацию, если кому-то это понадобится.