React Admin无法完全识别自定义Resource函数组件如何解决？

问题原因 #

react-admin 的 <Admin> 组件只会直接读取其直接子元素中 <Resource> 组件的 props 生成路由、注册资源。你把 <Resource> 封装在自定义的 <EmployeeResource> 内部后，<Admin> 无法穿透自定义组件拿到内层 Resource 的 name 等配置，导致路由生成错误，才会出现跳转404、只有 /undefined 路径可访问的问题。

解决方案（完全符合DRY原则，彻底避免App.jsx臃肿） #

不用把 <Resource> 封装为自定义组件，直接把每个资源的配置抽离为单独的配置对象，利用 <Admin> 原生支持的 resources 属性统一传入即可，所有资源配置都可以收拢到子文件夹管理：

1. 调整 ./resources/Employee.jsx 的导出内容：

// ./resources/Employee.jsx
import EmployeeList from '../views/EmployeeList';
import EmployeeEdit from '../views/EmployeeEdit';
import EmployeeCreate from '../views/EmployeeCreate';
// 其他需要的组件都可以在这里引入

// 直接导出资源配置对象，所有<Resource>支持的属性都可以在这里定义
export const employeeResource = {
  name: "employees",
  list: EmployeeList,
  edit: EmployeeEdit,
  create: EmployeeCreate,
  icon: EmployeeIcon,
  hasDelete: true
};

2. 在 ./resources/index.js 统一导出所有资源配置，后续加新资源只需在这里加一行导出即可：

// ./resources/index.js
export { employeeResource } from './Employee';
export { departmentResource } from './Department';
export { projectResource } from './Project';
// 其他资源依次导出

3. 在 App.jsx 直接批量传入所有资源配置即可，不用在<Admin>内部写任何<Resource>：

// ./App.jsx
import { Admin } from "react-admin";
// 一次性导入所有资源配置
import * as resourceConfigs from "./resources";

const App = () => (
  <Admin
    {...otherNecessaryProps}
    resources={Object.values(resourceConfigs)}
  >
    {/* 无需额外写其他内容 */}
  </Admin>
);

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