React中如何解决“Warning: Functions are not valid as a React child.”错误？

错误根源 #

你的代码存在几处违反React Router v6规则和React元素渲染规范的问题，直接导致了这个警告：

1. App.js 路由配置错误

   • React Router v6 中，Route 的 element 属性必须传入React元素（如 <PageRenderer />），而非组件本身（PageRenderer）。
   • v6 已移除 render 属性，默认路由跳转需直接使用 element={<Navigate to="/home" />}。
   • 404 路由需指定 path="*" 匹配所有未定义路径，且 element 不能是返回数字的函数，必须返回合法React元素。

2. page-render.js 组件渲染逻辑错误

   • useMatch 在v6中已废弃，应改用 useParams 获取路由参数。
   • generatePage 里多余地把组件包裹成函数，且 React.createElement 应传入组件本身，而非执行后的结果。
   • 错误 fallback 返回的 () => 404 是纯函数，不符合React子元素要求，需改成返回React元素的组件。

修复后的代码 #

App.js

import React from 'react';
import Navigation from './components/Navigation';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

import PageRenderer from './page-render';

function App() {
  return (
    <Router>
      <div className="App">
        <Navigation />
        <Routes>
          <Route path="/:page" element={<PageRenderer />} />
          <Route path="/" element={<Navigate to="/home" />} />
          <Route path="*" element={<div>404</div>} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

page-render.js

import React from 'react';
import { useParams } from 'react-router-dom';

const generatePage = page => {
  let Component;
  try {
    Component = require(`./pages/${page}.js`).default;
    return React.createElement(Component);
  } catch (err) {
    console.warn(err);
    return React.createElement(() => <div>404</div>);
  }
};

const PageRenderer = () => {
  const { page } = useParams();
  return generatePage(page);
};

export default PageRenderer;

内容的提问来源于stack exchange，提问作者Sunday Brown Akobo