React两类报错修复求助：函数无效子元素与路由无元素问题

错误1：Functions are not valid as a React child #

问题原因 #

你直接把函数（比如createDeleteAccountPage这类）当作React元素返回了，要么是没调用工厂函数生成组件实例，要么是把函数组件当成普通函数返回，没加<>标签渲染。

修复步骤 #

假设createDeleteAccountPage是返回React组件的工厂函数，比如：

// createDeleteAccountPage示例
const createDeleteAccountPage = (props: { type: string }) => {
  return () => <DeleteAccountPage type={props.type} />;
};

那在pages/change-account/index.ts里要这么用：

import { useParams } from 'react-router-dom';
import createDeleteAccountPage from './createDeleteAccountPage';

const ChangeAccountPage = () => {
  const { pageType } = useParams(); // 假设URL参数是pageType
  // 先调用工厂函数生成组件
  const TargetPage = createDeleteAccountPage({ type: pageType });
  // 再用组件标签渲染，不能直接返回函数
  return <TargetPage />;
};

export default ChangeAccountPage;

如果createDeleteAccountPage本身就是函数组件，别直接返回函数：

// 错误写法
return createDeleteAccountPage;
// 正确写法
return <createDeleteAccountPage type={pageType} />;

错误2：Matched leaf route at location "/" does not have an element #

问题原因 #

React Router（v6+）的路由配置里，根路径"/"没设置element属性，或者还用了旧版的component属性，导致路由找不到要渲染的组件，页面为空。

修复步骤 #

在路由配置文件（比如router.ts或App.tsx）里，给根路径指定要渲染的组件：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import ChangeAccountPage from './pages/change-account';

const router = createBrowserRouter([
  {
    path: '/',
    // 必须用element指定组件，不能留空或用component
    element: <ChangeAccountPage />,
  },
  // 其他路由配置...
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

如果根路径需要跳转到带参数的页面，比如/change-account?type=delete，可以配置重定向：

import { Navigate } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Navigate to="/change-account?type=delete" replace />,
  },
  {
    path: '/change-account',
    element: <ChangeAccountPage />,
  },
]);

结合URL参数切换页面的完整示例 #

如果要通过URL参数type切换不同页面（比如/change-account?type=delete显示删除页），index.ts可以这么写：

// pages/change-account/index.ts
import { useSearchParams } from 'react-router-dom';
import DeleteAccountPage from './DeleteAccountPage';
// 假设还有修改账号页面
import ModifyAccountPage from './ModifyAccountPage';

const ChangeAccountPage = () => {
  const [searchParams] = useSearchParams();
  const pageType = searchParams.get('type');

  switch (pageType) {
    case 'delete':
      return <DeleteAccountPage />;
    case 'modify':
      return <ModifyAccountPage />;
    default:
      return <div>请指定正确的页面类型</div>;
  }
};

export default ChangeAccountPage;

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