Javascript function not being called between page navigations and routing using react-router-dom v6

Question

I have an app.js something like this

class App extends React.Component {
    render() {
        return (
            <Routes>
                <Route path="/"
                    element={
                        <PrivateRoute
                            auth={{ isAuthenticated: AuthenticationResource.isLoggedIn() }}
                        >
                            {' '}
                            <Navigate to="/dashboard" />
                        </PrivateRoute>
                    }
                />
                <Route path="/login"
                    element={
                        <PublicRoute
                            auth={{ isAuthenticated: AuthenticationResource.isLoggedIn() }}
                        >
                            {' '}
                            <LoginPage />
                        </PublicRoute>
                    }
                />
                <Route path="/dashboard"
                    element={
                        <PrivateRoute
                            auth={{ isAuthenticated: AuthenticationResource.isLoggedIn() }}
                        >
                            {' '}
                            <DashboardPage />
                        </PrivateRoute>
                    }
                />

and my authentication resource like this

import StorageFactory from './storage';

const AuthenticationResource = (() => {
    const storage = StorageFactory();

    const getSessionId = function () {
        console.log('sessioncookie', storage.getItem());
        return storage.getItem();
    };

    const removeSessionId = function () {
        return storage.removeItem();
    };

    return {
        isLoggedIn: () => typeof getSessionId() === 'string' && getSessionId().length > 0,
    };
})();

export default AuthenticationResource;

I have placed a console statement in the getSessionId function. I am able to see the console logs when the page is loading the first time. But whenever I am moving between pages using navigate, I don't see the console logs, which I am inferring that the isLoggedIn() is not getting called. Please help me out. Thanks in Advance

PS This is how the private routing and public routing are defined

const PublicRoute = ({ auth: { isAuthenticated }, children }) => {
    return isAuthenticated ? <Navigate to="/dashboard" /> : children;
};

const PrivateRoute = ({ auth: { isAuthenticated }, children }) => {
    return isAuthenticated === true ? children : <Navigate to="/login" />;
};

Answer 1

The isLoggedIn function should be called when the route is accessed and not when the Route component rendered. Move invoking the function into the route protection components.

Example:

const PublicRoute = ({ auth: { isAuthenticated }, children }) => {
  return isAuthenticated() // <-- invoke here
    ? <Navigate to="/dashboard" />
    : children;
};

const PrivateRoute = ({ auth: { isAuthenticated }, children }) => {
  return isAuthenticated() // <-- invoke here
    ? children
    : <Navigate to="/login" />;
};

...

<Routes>
  <Route
    path="/"
    element={
      <PrivateRoute
        auth={{
          isAuthenticated: AuthenticationResource.isLoggedIn // <-- pass reference here
        }}
      >
        <Navigate to="/dashboard" />
      </PrivateRoute>
    }
  />
  <Route
    path="/login"
    element={
      <PublicRoute
        auth={{
          isAuthenticated: AuthenticationResource.isLoggedIn // <-- pass reference here
        }}
      >
        <LoginPage />
      </PublicRoute>
    }
  />
  <Route
    path="/dashboard"
    element={
      <PrivateRoute
        auth={{
          isAuthenticated: AuthenticationResource.isLoggedIn // <-- pass reference here
        }}
      >
        <DashboardPage />
      </PrivateRoute>
    }
  />
</Routes>