如果有 IF 要路由，为什么 React / NextJS 仍然呈现返回？

Question

I'm working on a web app in NextJS. I have some logic that will check if a user is logged in, else route to the login page.

But in reality this code actually returns an error where the userContext cannot be defined. That's why I have a check for a user first.

I hypothesis the return statement is being run despite the verification for existing user. Is this true of React?

TypeError: Cannot read properties of null (reading 'displayName')

Full-ish code:

... some imports and stuff

export default function Account(pageProps) {
  const route = useRouter()
  const userContext = useUserContext()

  if (!userContext) {
    route.push("/login")
  } 

  return (
      <Box sx={{ mt: "3rem" }}>
        {user &&
          <Typography variant="h2">
            Welcome{userContext.displayName && ' ' + userContext.displayName}!
          </Typography>
        }
      </Box>
  )

NOTE: I resolved this issue by adding a return statement in the IF statement. But I still would like to know why this happens.

Answer 1

try this function to determine whether object or anything is empty or not :

// custom function to check if an object / array or some variable is empty
export const isEmpty = ( value ) =>
  value === undefined ||
  value === null ||
  ( typeof value === "object" && Object.keys( value ).length === 0 ) ||
  ( typeof value === "string" && value.trim().length === 0 );

Then use it as following :

  if (userContext && isEmpty(userContext)) {
    return route.push("/login");
  }
....