[Bug]: Trailing %20 whitespace character causes nested routes to fail

[sethreidnz]

What version of React Router are you using?

6.15.0

Steps to Reproduce

I have create detailed reproduction here:

https://github.com/sethreidnz/react-router-nested-routes-whitespace-issue

The details are all in the readme there but repeated here:

If you visit the following link:

https://react-router-nested-route-whitespace.netlify.app

then click on the first three links then they work and you can see the content of the page like so:

If you visit the 4th link then you will not see the content of the page because the index sub-route is not rending:

I think this is due to the trailing whitespace character (%20) which is interesting because the whilecard route itself /pages/:pageId/* is successfully being hit, and the pageId is being correctly parsed as a route param, but then the index sub-route is not being rendered.

Expected Behavior

Regardless of there being a %20 at the end of the route that the sub-route would still render. Of course I am going to fix the application that I found this in so that users cannot create pages with whitespace at the end. However this still appears to be inconsistent behaviour given the parent route is hit, the pageId route param is successfully parsed but then the nested route doesn't work specifically when there is a %20 at the end.

Actual Behavior

Due to the trailing whitespace character (%20) the whidcard parent route itself /pages/:pageId/* is successfully being hit, and the pageId is being correctly parsed as a route param, but then the index sub-route is not being rendered.

[sethreidnz]

Has anyone been able to have a look at this? Let me know if you need more information.

[sethreidnz]

Hi there just wondering if this bug has been looked at or anyone would be able to help me figure out what the issue is or how to diagnose? Would be good to fix this.

[JonathanWbn]

I just ran into this same problem and was able to fix this by updating to the latest v6 version.