使用React 18、React路由器6和React身份验证套件2.7
我试着做登录页面，如RAK link示例所示
但是如果得到这个错误

登录组件JSX的代码

import React from "react"
import axios from "axios"
import { useIsAuthenticated, useSignIn } from "react-auth-kit"
import { useNavigate, Navigate } from "react-router-dom"

const SignInComponent = () => {
  const isAuthenticated = useIsAuthenticated()
  const signIn = useSignIn()
  const navigate = useNavigate()

  const [formData, setFormData] = React.useState({ login: "", password: "" })
  async function onSubmit(e) {
    e.preventDefault()
    axios.post("http://localhost:3030/api/auth/login", formData).then((res) => {
      if (res.status === 200) {
        if (
          signIn({
            token: res.data.token,
            expiresIn: res.data.expiresIn,
            tokenType: "Bearer",
            authState: res.data.authUserState,
          })
        ) {
          navigate("/profile")
          console.log("logged in")
        } else {
          //Throw error
        }
      } else {
        console.log("da duck you want")
      }
    })
  }
  console.log(isAuthenticated())
  if (isAuthenticated()) {
    // If authenticated user, then redirect to his profile
    return <Navigate to={"/profile"} replace />
  } else {
    return (
      <form onSubmit={onSubmit} className="flex flex-col w-96 p-2">
        <input
          className="text-black mt-2"
          type={"login"}
          onChange={(e) => setFormData({ ...formData, login: e.target.value })}
        />
        <input
          className="text-black mt-2"
          type={"password"}
          onChange={(e) =>
            setFormData({ ...formData, password: e.target.value })
          }
        />

        <button type="submit">Submit</button>
      </form>
    )
  }
}

export default SignInComponent

Routes.jsx

// system
import React from 'react'
import { RequireAuth } from 'react-auth-kit'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

// pages
import DeveloperPage from "../pages/Dev.page";
import MainPage from "../pages/Main.page";
import ProfilePage from "../pages/profile/Profile.page";
import LoginPage from "../pages/Auth/Login.page.auth"
import RegisterPage from "../pages/Auth/Register.page.auth"

// components

// logic
const RoutesComponent = () => {
  return (
    <BrowserRouter>
      <Routes>

        {/* main */}
        <Route path={"/"} element={<MainPage />} />

        {/* Authentication */}
        <Route path={"/login"} element={<LoginPage />} />
        <Route path={"/register"} element={<RegisterPage />} />

        {/* Developer */}
        <Route path={"/dev"} element={<DeveloperPage />} />

        {/* Other */}
        <Route path={"/profile"} element={
            <RequireAuth loginPath={"/login"}>
              <ProfilePage />
            </RequireAuth>
          } />

      </Routes>
    </BrowserRouter>
  );
};
export default RoutesComponent;

Profile.jsx

import React, { useState } from 'react'

export default function App() {

  return (
    <div className="wrapper">
      <h1>Profile</h1>
    </div>
  );
}

我已经尝试过搜索这个错误所有的stackoverflow，github问题和链接，提供的错误，但仍然不明白如何修复错误在我的例子
更新：应用程序.jsx

import React from "react";
import { AuthProvider } from "react-auth-kit";
import RoutesComponent from "./routes/router";
import "./index.css";

function App() {
  return (
    <AuthProvider authName={"_auth"} authType={"localstorage"}>
      <RoutesComponent />
    </AuthProvider>
  );
}

export default App;