React Router HOC渲染异常：props.children未显示布局内容

核心问题 #

1. React Router v6 API变更：v6已废弃component/render属性，统一使用element，且当Route同时存在element和旧属性时，会优先渲染element内容。你在App中传入了element={<Temp />}，导致HOC中定义的component回调完全被忽略，DefaultLayout根本没被调用。
2. HOC结构错误：你在HOC内部嵌套了Routes，但外层App未将HOC包裹在全局Routes中，不符合v6的路由结构规范；同时component回调函数未返回JSX（缺少return关键字）。
3. 属性不匹配：HOC解构的是component，但App传入的是element，导致无法正确关联要布局的组件。

修正代码 #

1. 重构Default.HOC.js

去掉内部嵌套的Routes，改为返回带布局的Route元素，直接使用element属性传递布局内容：

import React from "react";
import { Route } from "react-router-dom";
import DefaultLayout from "../layouts/Default.layout";

const DefaultHOC = ({ element, ...rest }) => {
  return (
    <Route
      {...rest}
      element={
        <DefaultLayout>
          {element}
        </DefaultLayout>
      }
    />
  );
};

export default DefaultHOC;

2. 调整App.js

将HOC包裹在全局Routes中（v6要求所有Route必须放在Routes内部）：

import { Routes } from "react-router-dom";

// HOC
import DefaultHOC from "./HOC/Default.HOC";

// Component
import Temp from "./components/temp";

function App() {
  return (
    <Routes>
      <DefaultHOC path="/" element={<Temp />} />
    </Routes>
  );
}

export default App;

可选：兼容component传参的写法

如果你更习惯通过component传递组件，可修改HOC和App如下：

• Default.HOC.js：

import React from "react";
import { Route } from "react-router-dom";
import DefaultLayout from "../layouts/Default.layout";

const DefaultHOC = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      element={
        <DefaultLayout>
          <Component />
        </DefaultLayout>
      }
    />
  );
};

export default DefaultHOC;

• App.js：

import { Routes } from "react-router-dom";

// HOC
import DefaultHOC from "./HOC/Default.HOC";

// Component
import Temp from "./components/temp";

function App() {
  return (
    <Routes>
      <DefaultHOC path="/" component={Temp} />
    </Routes>
  );
}

export default App;

效果验证 #

修正后，访问根路径时会同时渲染Default Layout Page和This is a temp component，符合预期。

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