React包装组件无法渲染问题求助

你的代码问题出在路由的element属性使用方式错误。Wrapper(Component)返回的是一个React组件函数，但Route的element需要接收的是JSX元素（即组件实例），而非组件函数本身。

修复步骤 #

有两种可行的修复方式：

• 方式一：直接将包装后的组件转为JSX实例
  修改App.js中的路由配置：

<Route path="/wcomponent" element={<Wrapper(Component) />} />

• 方式二：先定义包装后的组件，再使用
  在App.js中先创建包装好的组件：

const WrappedComponent = Wrapper(Component);

再在路由中引用该组件：

<Route path="/wcomponent" element={<WrappedComponent />} />

完整修复后的App.js示例 #

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Component from "./Component";
import Wrapper from "./Wrapper";

// 方式二：先定义包装后的组件
const WrappedComponent = Wrapper(Component);

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/component" element={<Component />} />
        {/* 方式一写法 */}
        {/* <Route path="/wcomponent" element={<Wrapper(Component) />} /> */}
        {/* 方式二写法 */}
        <Route path="/wcomponent" element={<WrappedComponent />} />
      </Routes>
    </BrowserRouter>
  );
}

问题原因说明 #

当你直接写Wrapper(Component)时，返回的是AuthComponent这个函数，React无法将组件函数直接作为元素渲染，必须用<>包裹生成实例，这样React才能识别并调用该组件函数，执行内部的useState和条件渲染逻辑。

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