You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Open app in browser with additional slash at the end of the URL, ie. http://localhost:3000//
Expected Behavior
Lazy loaded component is rendered at root URL, even though there are two slashes in the URL.
Actual Behavior
Lazy loaded component is not loading, there is Failed to construct 'URL': Invalid URL error. When component is rendered with element, it is being rendered correctly.
@mskrzypek if it helps I investigated that one slightly. It looks like official URL spec that <host>// should not be a valid URL. You wrote in Expected behavior that the Slash component should get rendered at the root. Why do you expect that in the // route? I am asking as it looks like a nested route to me if anything.
@mskrzypek if it helps I investigated that one slightly. It looks like official URL spec that <host>// should not be a valid URL. You wrote in Expected behavior that the Slash component should get rendered at the root. Why do you expect that in the // route? I am asking as it looks like a nested route to me if anything.
I believe, this is not a duplicate of #11429. Please refer to the reproduction example, which clearly explains the problem. When we use the element prop in Route, the double slash in the root route is handled, but when we use lazy, it is not. However, in non-root routes, both element and lazy handle doubled routes.
Regardless of the URL specification, it is a very popular convention to handle doubled slashes in URLs, and I think it is not uncommon for users to mistakenly enter two slashes instead of one in a URL. If one could perform some benchmarks, it turns out that in most solutions, double slashes are converted to single slashes, e.g.
What version of React Router are you using?
6.21.2
Steps to Reproduce
Prepare routing with lazy loaded component at root path:
Open app in browser with additional slash at the end of the URL, ie.
http://localhost:3000//
Expected Behavior
Lazy loaded component is rendered at root URL, even though there are two slashes in the URL.
Actual Behavior
Lazy loaded component is not loading, there is
Failed to construct 'URL': Invalid URL
error. When component is rendered withelement
, it is being rendered correctly.I prepared a reproduction example: https://codesandbox.io/p/sandbox/blissful-ritchie-9szrnk
The text was updated successfully, but these errors were encountered: