Javascript function 没有在页面导航和使用 react-router-dom v6 的路由之间调用

Question

我有一个 app.js 是这样的

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>
                    }
                />

和我这样的身份验证资源

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;

我在 getSessionId function 中放置了一个控制台语句。 第一次加载页面时，我可以看到控制台日志。 但是，每当我使用导航在页面之间移动时，我都看不到控制台日志，我推断 isLoggedIn() 没有被调用。 请帮帮我。 提前致谢

PS 私有路由和公有路由是这样定义的

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

isLoggedIn function 应该在访问路由时调用，而不是在渲染Route组件时调用。 将调用 function 移动到路由保护组件中。

例子：

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>