AdminJS自定义React组件无法覆盖默认仪表盘问题求助

以下是针对你的问题的排查步骤和解决方案：

1. 修复JSX标签转义问题 #

你的Dashboard.jsx代码中使用了HTML转义字符<和>，这会导致React无法识别JSX标签，组件无法正常渲染。将代码中的转义字符替换为正常的JSX标签：

import React from 'react';
import { Box } from '@adminjs/design-system';
import { useTranslation } from 'adminjs';

const Dashboard = () => {
    const { translateMessage } = useTranslation();
    console.log('dashboard component loading...')
    return (
        <Box>
            <h1>{translateMessage('helloMessage', 'Hello')}</h1>
        </Box>
    );
};

export default Dashboard;

2. 确认组件路径正确性 #

检查componentLoader.add中的路径是否相对于admin.js的位置正确：

• 如果admin.js在项目根目录，./src/components/Dashboard.jsx对应根目录下的src/components/Dashboard.jsx，确认该文件实际存在，路径无拼写错误。

3. 配置JSX解析支持 #

Node.js默认无法直接解析.jsx文件，需要通过Babel配置支持：

1. 安装依赖：

npm install @babel/core @babel/node @babel/preset-react @babel/preset-env --save-dev

2. 在项目根目录创建.babelrc文件：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

3. 修改启动命令，使用Babel Node运行：

npx babel-node server.js
# 或配合nodemon实现热重载
npx nodemon --exec babel-node server.js

4. 移除重复的适配器注册 #

server.js中重复注册了Sequelize适配器，可能导致潜在冲突，删除该行：

// 移除这行代码
AdminJS.registerAdapter({ Database, Resource });

5. 清除缓存并重启服务 #

如果之前有旧的构建缓存，可能导致组件不更新：

• 删除项目中的缓存目录（如node_modules/.cache，如果存在）
• 完全停止服务后重新启动，避免进程残留

完成以上步骤后，重新启动服务，查看浏览器控制台是否输出dashboard component loading...，同时检查AdminJS仪表盘是否显示自定义组件内容。

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