React项目报错不知道是什么问题

设置二级路由的时候出错了改了很久没改好
猜测是Ant Design更新了的缘故按照最新的改了还是不对

import { Layout, Menu, Popconfirm } from 'antd'
import { Outlet } from 'react-router-dom'
import './index.scss'
import {
  HomeOutlined,
  DiffOutlined,
  EditOutlined,
  LogoutOutlined
} from '@ant-design/icons'


const { Header, Sider } = Layout
/* function getItem (label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  }
} */
/* const items = [
  {
    label: '数据概览',
    key: '1',
    icon: <HomeOutlined />
  },
  {
    label: '内容管理',
    key: '2',
    icon: <DiffOutlined />
  },
  {
    label: '发布文章',
    key: '3',
    icon: <EditOutlined />
  }
] */
const GeekLayout = () => {
  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <div className="user-info">
          <span className="user-name">user.name</span>
          <span className="user-logout">
            <Popconfirm title="是否确认退出？" okText="退出" cancelText="取消">
              <LogoutOutlined /> 退出
            </Popconfirm>
          </span>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            theme="dark"
            defaultSelectedKeys={['1']}
            style={{ height: '100%', borderRight: 0 }}
          >
            <Menu.Item icon={<HomeOutlined />} key="1">
              数据概览
            </Menu.Item>
            <Menu.Item icon={<DiffOutlined />} key="2">
              内容管理
            </Menu.Item>
            <Menu.Item icon={<EditOutlined />} key="3">
              发布文章
            </Menu.Item>
          </Menu>
          {/* <Menu
            mode="inline"
            theme="dark"
            defaultSelectedKeys={['1']}
            style={{ height: '100%', borderRight: 0 }}
            items={items}
          /> */}

        </Sider>
        <Layout className="layout-content" style={{ padding: 20 }}>
          {{/* 二级路由出口 */ }}
          <Outlet />
        </Layout>
      </Layout>
    </Layout>
  )
}

export default GeekLayout

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7468726
你也可以参考下这篇文章：React UI组件库Ant Design的安装、使用及按需导入
除此之外, 这篇博客: react项目中修改ant design 主题色中的 常用样式变量 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影

您还可以看一下吕常龙老师的React及Ant Design Pro零基础快速入门2022课程中的附赠:旧版01React实战入门教程之基础-1小节, 巩固相关知识点

按照报错信息来看，应该是哪个属性应该传一个数组值，你传了一个对象值

你 render 函数里 {}使用这个时，直接渲染对象了。你查一下
https://blog.csdn.net/weixin_44058725/article/details/119951938

React项目 报错不知道是什么问题

React项目报错不知道是什么问题