Inputs are not displayed when using TabbedForm

[armandosg]

What you were expecting:

When navigating to an edit route that uses TabbedForm the inputs should be displayed.

What happened instead:

When navigating to an edit route that uses TabbedForm the inputs are not displayed.

Steps to reproduce:

1. Clone the sample application. https://github.com/armandosg/react-admin-v5
2. Run the server
3. Navigate to the "Resources" list
4. Click on the first item
5. Check that the input are not displayed
6. Click on any tab link
7. The inputs are displayed now

Related code:

https://github.com/armandosg/react-admin-v5

Other information:

I'm seeing that this only happens when the id of the resource contains special characters.

Environment

• React-admin version: 5.0.1
• Last version that did not exhibit the issue (if applicable): 4.x.x
• React version: 18
• Browser: Chrome
• Stack trace (in case of a JS error):

[fzaninotto]

Confirmed, thanks.

Tested on https://codesandbox.io/p/devbox/github/armandosg/react-admin-v5/tree/main, it seems the bug only occurs on the first resource, the one with a colon in its id ("1:prod:resource1"). So it seems to be that the TabbedForm routing is too strict on the id it accepts.

[djhi]

This issue has been introduced by remix-run/react-router#11199 released in react-router@6.22.1.

The location returned by useLocation is "/resource/1:prod:resource1/" while useResolvedPath now returns "/resource/1%3Aprod%3Aresource1"