React页面报错排查：默认导出非组件及无效子元素问题

先搞定移除Layout后的页面报错：Error: The default export is not a React Component in page: [/basically all pages] #

这个错说白了就是你的page.tsx没正确导出React组件，大概率是这俩问题：

• 用了命名导出而非默认导出
• 导出的东西根本不是合法的React组件（比如导出了个空对象或者普通函数）

修正方式 #

假设你要把example-a/_components/form.tsx里的表单作为页面内容，page.tsx这么写：

// app/example-a/page.tsx
import ExampleForm from './_components/form';

// 必须默认导出一个React函数组件
export default function ExampleAPage() {
  return <ExampleForm />;
}

同时检查form.tsx的导出是否正确：

// app/example-a/_components/form.tsx
import ExampleInput from './ExampleInput'; // 确保自定义组件路径没错

// 同样要默认导出组件（或者用命名导出，但导入时要加{}）
export default function ExampleForm() {
  return (
    <div>
      <ExampleInput label="用户名" />
      <p>Hello</p>
    </div>
  );
}

要是form.tsx用的是export function ExampleForm()这种命名导出，那导入时得写成import { ExampleForm } from './_components/form'，但page.tsx必须默认导出一个组件，这是路由页面的硬性要求

再解决Layout的报错：Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead. #

这个错是说你在ViewsLayout里试图渲染一个空对象，而不是合法的React元素。

常见问题与修复 #

1. Layout组件处理children的方式错了
   比如你可能把children当成对象来取属性了：

   // 错误写法
   export default function ViewsLayout({ children }) {
     return <div>{children.someProp}</div>; // children是React节点，不是对象！
   }
   

   正确的应该直接把children渲染出来：

   // 正确写法
   export default function ViewsLayout({ children }) {
     return (
       <div className="layout-wrap">
         {/* 这里放Layout的公共部分，比如导航栏、侧边栏 */}
         <header>页面头部</header>
         <main>{children}</main> {/* 直接渲染传入的页面内容 */}
       </div>
     );
   }
   

2. 使用Layout时传了空对象
   比如你在page.tsx里这么写：

   // 错误写法
   export default function ExampleAPage() {
     return <ViewsLayout>{}</ViewsLayout>; // 空对象不能当React子元素
   }
   

   正确的应该传你的表单组件：

   // 正确写法
   import ViewsLayout from '@/components/ViewsLayout'; // 确保Layout路径正确
   import ExampleForm from './_components/form';
   
   export default function ExampleAPage() {
     return (
       <ViewsLayout>
         <ExampleForm />
       </ViewsLayout>
     );
   }
   

额外要查的点 #

• 检查ExampleInput这类自定义组件，确保它们没返回空对象或者非法内容
• 要是用Next.js，确认page.tsx放在正确的路由目录里，文件名别写错
• 清一下缓存重新跑项目（比如next dev --clear-cache），避免旧代码缓存搞事情

内容的提问来源于stack exchange，提问作者Muhammad Tohir Rafly