React私有路由组件undefined问题：有效JWT时无法加载组件

你的问题核心在于私有路由组件PrivRoute的参数接收错误——React组件的子元素是通过**children**（复数）这个props传递的，而不是你写的child（单数），这直接导致child始终为undefined，持有有效Token时无法渲染目标组件。

修改后的代码 #

只需将PrivRoute中的参数和返回值里的child替换为children即可：

function PrivRoute({ children }) { // 修正参数名为children
    console.log("children:", children);
    return jwtCheck() ? children : <Navigate to="/login" />; // 修正返回的子组件引用
}

补充说明 #

当你在JSX中编写<PrivRoute><App /></PrivRoute>时，<App />会被React自动作为children属性传递给PrivRoute组件，只有使用正确的props名称才能获取到这个子组件。

另外可以提一句：如果后续jwtCheck涉及异步逻辑（比如从localStorage取Token并做后端验证），建议把验证逻辑改成带状态的写法，避免出现渲染闪烁的问题，但当前场景下，修复children的问题就能解决组件无法加载的核心问题。

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