为何React/NextJS做了路由跳转判断后仍执行return渲染逻辑？

你的猜测完全正确：React函数组件的渲染执行是同步逐行运行的，只有遇到return语句才会中断当前组件的渲染流程，没有提前return的情况下，哪怕你前面触发了跳转逻辑，后面的return渲染语句依然会完整执行。你之前的代码存在两个核心问题：

• 路由跳转route.push("/login")是异步触发的副作用，调用后不会立刻终止当前代码执行，也不会立刻完成页面跳转。判断完未登录状态后，代码会继续往下执行return后的JSX渲染逻辑，此时userContext依然是null，访问displayName属性就会抛出TypeError: Cannot read properties of null (reading 'displayName')错误。
• 代码里存在一处笔误：JSX中写的渲染判断条件是user &&，但组件内从未定义过user变量，正确的判断对象应该是userContext。

原有错误逻辑片段 #

if (!userContext) {
  route.push("/login")
  // 无中断逻辑，代码会继续向下执行
} 
// 后续渲染逻辑正常执行，此时userContext为null
return (
    <Box sx={{ mt: "3rem" }}>
      {user && // user未定义，本身就是隐性bug
        <Typography variant="h2">
          {/* 访问null的属性直接抛错 */}
          Welcome{userContext.displayName && ' ' + userContext.displayName}!
        </Typography>
      }
    </Box>
)

你在if判断块内补充return语句的写法是正确的：当检测到用户未登录时，直接通过return终止当前组件后续的渲染逻辑执行，不会走到访问userContext.displayName的代码段，从根源上避免了空值访问。通常return可以返回null或者跳转中的加载占位提示，优化用户体验。

修复后参考逻辑 #

if (!userContext) {
  route.push("/login")
  // 提前return终止当前渲染周期
  return <div>正在跳转至登录页...</div>
} 

return (
    <Box sx={{ mt: "3rem" }}>
      {/* 修正判断变量，增加可选链兜底 */}
      {userContext &&
        <Typography variant="h2">
          Welcome{userContext?.displayName && ' ' + userContext.displayName}!
        </Typography>
      }
    </Box>
)

• 不要把登录校验逻辑散落在每个业务页面内，可以抽成全局路由守卫：Next.js可以用中间件、全局路由监听事件，或者封装鉴权高阶组件包裹需要登录才能访问的页面，避免漏写提前return导致同类报错。
• 涉及上下文、接口返回的可能为空的对象，访问深层属性时优先用可选链操作符?.做兜底，哪怕对象为空也不会直接抛错，只会返回undefined。

内容的提问来源于stack exchange，提问作者engineer-x