'ReactAdmin doesn't fully recognize a custom Resource functional component

I want to DRY the way my <Resource /> components are organized in my project. This way, my App.jsx file won't be bloated by a lot of code.

For example, let's say I have a <EmployeeResource /> component like this:

// ./resources/Employee.jsx

import React from "react";
import { Resource } from "react-admin";

const EmployeeResource = (props) => <Resource {...props} name="employees" />;

export default EmployeeResource;

Now I want to use it in my <Admin /> component like this:

// ./App.jsx

// other imports
import EmployeeResource from "./resources/Employee";

const App = () => (
  <Admin
    {...otherNecessaryProps}
  >
    <EmployeeResource />
  </Admin>
);

Even if it's registered by react-admin and that I can see its link in the sidebar, its route doesn't work. If I click on the menu item I see a Not Found page, but if I navigate to /undefined in my browser, now I see its content.

Is there a way to DRY many <Resource /> components in one sub folder?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source