高阶组件未渲染路由组件，子组件Props更新失效问题

原代码存在的4个核心问题 #

• 类组件继承错误：React.component 应为 React.Component（首字母必须大写，否则无法正确继承React类组件）
• 组件命名不符合规范：JSX中小写的component会被React识别为原生HTML标签，而非传入的React组件
• Hook调用违反规则：AuthHook() 在普通函数（非React组件/自定义Hook）中调用，违反了React Hook的使用规则
• 丢失原组件props：未传递路由组件原本的match、location等props，导致组件功能异常

修复后的高阶组件代码 #

function HigherOrderHandler(Component) {
  // 返回函数式组件，合法使用React Hook
  return function WithPropComponent(props) {
    const { name } = AuthHook();
    // 传递原组件所有props + 新增的name属性
    return <Component {...props} name={name} />;
  };
}

关键修改说明 #

1. 组件命名规范：将参数名改为Component（首字母大写），确保JSX中被识别为React组件而非原生标签
2. 改用函数式HOC：类组件无法使用React Hook，改为函数组件后可合法调用AuthHook
3. Hook调用合规化：在函数组件顶层调用AuthHook，完全符合React Hook的使用规则
4. 保留原组件props：通过{...props}传递路由组件的所有原始属性，避免功能丢失

路由使用方式不变 #

原routes中的调用逻辑无需修改，继续使用：

{
  path: '/',
  exact: true,
  component: HigherOrderHandler(LandingPage)
}

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