react-router-dom v6受保护路由条件渲染不触发组件重渲染问题

问题现象 #

实现受保护路由时，条件分支返回值写法不同，会出现isAuthenticated状态变更后组件不触发重渲染的异常：

• 异常组件LoginRequired代码如下，注释标注了不同写法下的状态检测表现：

export const LoginRequired = ({ isAuthenticated, children }) => {
    if (isAuthenticated) {
        return <Navigate to='/' replace /> // 可检测到isAuthenticated状态变更
        // return children <- 无法检测到isAuthenticated状态变更
    }
    // return <Navigate to='/' replace /> <- 无法检测到isAuthenticated状态变更
    return children; // 可检测到isAuthenticated状态变更
}

预期效果为isAuthenticated为true时渲染children，但将if块内的return children取消注释后，组件无法响应isAuthenticated的状态变化。

• 同项目下逻辑写法几乎一致的ProtectedRoute组件运行完全正常，代码如下：

export const ProtectedRoute = ({ isAuthenticated, children }) => {
    if (isAuthenticated) {
        return <Navigate to='/' replace />
    }
    return children;
}

问题根因 #

• 首先存在逻辑写反的问题：现有ProtectedRoute的逻辑是已登录触发跳转、未登录渲染子内容，属于「游客可访问、已登录拦截」的路由守卫（比如登录、注册页用的守卫），和你预期的「isAuthenticated为true时渲染children」的登录鉴权守卫逻辑完全相反，逻辑颠倒本身就会导致渲染结果和预期不符。
• 所谓「检测不到状态变更」是渲染逻辑和路由跳转机制共同造成的假象，和React重渲染能力无关：
  • <Navigate>组件触发后会立即替换当前路由，直接卸载当前守卫组件及下属子路由树。当if分支返回<Navigate>时，状态变更触发跳转、页面切换的效果非常直观，会让你误以为组件正常检测到了状态变化。
  • 当if分支返回children、外层return返回<Navigate>时，如果初始isAuthenticated为false，组件首次渲染就会执行跳转，直接被卸载，根本不会留在当前路由上下文里等待后续状态更新，自然看不到状态变更后的重渲染效果。
  • 两个组件表现不一致，核心是挂载位置不同：如果LoginRequired被嵌套在其他带条件判断的路由/组件内部，未满足前置条件时组件根本不会被挂载，props更新自然无法触发它重渲染。
• 额外注意：if分支内return语句后的代码属于不可达代码，永远不会执行，你注释掉的分支写法本身就不会产生任何运行效果。

修复方案 #

• 先明确两类路由守卫的职责，不要写反判断逻辑：
  • 登录鉴权守卫：登录状态正常才渲染子内容，未登录跳转至登录/首页
  • 游客专属路由守卫：未登录才渲染子内容（比如登录页），已登录跳转至应用首页
• 确保路由守卫直接包裹对应路由节点，放在路由配置的最外层，不要嵌套在其他会被条件卸载的组件层级下，保证鉴权状态变更时守卫组件始终处于挂载状态，可以正常接收props变化。
• 修正后的登录鉴权守卫（符合你「isAuthenticated为true时渲染children」的预期）代码如下：

import { Navigate } from 'react-router-dom';

export const LoginRequired = ({ isAuthenticated, children }) => {
  // 未登录时触发跳转
  if (!isAuthenticated) {
    return <Navigate to="/" replace />;
  }
  // 已登录时渲染子路由
  return children;
};

如果需要实现游客专属路由守卫（对应你之前正常运行的ProtectedRoute逻辑），代码如下：

import { Navigate } from 'react-router-dom';

export const GuestOnlyRoute = ({ isAuthenticated, children }) => {
  // 已登录时触发跳转
  if (isAuthenticated) {
    return <Navigate to="/" replace />;
  }
  // 未登录时渲染子路由
  return children;
};

内容的提问来源于stack exchange，提问作者jeff