useNavigate from react-router-dom causes error after page render

Question

Im new to this website so bear with me.

I'm developing an appointment based website in which I have a login page, a profile page, and a register page. Im trying to implement a programatic redirect to a users profile, I opted to use useNavigation from react-router-dom. I attempted to use the navigate function like the documentation says but it crashes my website after the render. I stepped through my code with my debugger and the correct page does render, however, somewhere after the render, my site goes blank and returns an error im confused by. I've managed to simplify/obfuscate my code aswell in the examples below.

This is the applicable code to my problem. When the page is rendered it will check for a JWT in local storage, it then verifies the JWT in my server and returns data, i expected that if the jwt is verified then the page will redirect to my profile page route. which it does do, but then goes blank.

The profilePage route is currently unprotected for simplicity so i can figure out why useNavigate isn't working.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from "react-router-dom";


const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
);

app.js

import Appbar from './appbar.jsx';
import { Route, Routes } from 'react-router-dom';
import Login from "./components/login/login.jsx";
import ProfilePage from "./components/profilePage/profilePage.jsx";


export default function App() {
  return (
      <div className="App">
        <Appbar/>
      <>
        <Routes>
          <Route path="/" element={<Home /> }/>
          <Route path="/login"/> element={<Login />}/>
          <Route path="/profilePage" element={<ProfilePage />}/>
            </Routes>
      </>
      </div>
    
    );
  }

login.jsx

import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';


export default function Login(props) {
  const navigate = useNavigate() 
/*
EDIT: I added this here because this was in my original code that got me my original error
*/


  useEffect( async () => {

    // My express route verifying the JWT
      const response = await fetch('/users/userAuth', {
        method: 'POST',
        headers: {
          'x-access-token': localStorage.getItem('token'),
        },
      })
      const data = await response.json()
      if (data.isLoggedIn === true) 
      {
        navigate("/profilePage")
      }
      else {
        console.log("not logged in")
      }

    }, [])

profilePage.jsx

export default function ProfilePage() {

// Keeping it simple until i can get useNavigate to work
    return (
        <div>
            <h1>Profile Page</h1> 
        </div>
    )
}

This is the error I get: React Error from useNavigate

EDIT: Thanks for the patience regarding the edits. In an effort to obfuscate I removed the crucial parts of my code. Although im still getting the same error

Answer 1

I think that the problem is on the async function passed in React.useEffect. You should create the async function inside React.useEffect's setup and then call it.

Have a look here on how to use async functions with React.useEffect