How to create react-admin custom route?

Question

I tried to create a custom route in my react-admin app, but I get an error when I try to load it.

Here is the code:

// src/pages/MyAdmin.tsx
export const MyAdmin = () => (
  <Admin
    dataProvider={dataProvider}
  >
    <Resource name="users" list={UserList} />
    <CustomRoutes>
      <Route path="/reg" element={<Registration />} />
    </CustomRoutes>
  </Admin>
);

When I go to /#/reg I just get a "Something went wrong. A client error occurred and your request couldn't be completed". And the console outputs an error saying: "Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')"

I was just trying to follow this https://marmelab.com/react-admin/Routing.html but I don't know what I did wrong.

Thank you for your help.

I already tried to move my custom "MyAdmin" component to the App component itself but to no avail.

Answer 1

It seems that the error is inside the registration component. The error is being caught by the React Error Boundary, but the routing itself is correct.

As in the documentation: https://marmelab.com/react-admin/Layout.html#error

React-admin uses React’s Error Boundaries to render this page when any component in the page throws an unrecoverable error

So check the code inside the registration component or try with an empty one.

Also check that you are importing the Route component from react-router-dom and not from other library.