TypeError on URLs with empty path segments

[s177312]

Version
2.9.1

Describe the bug
The TypeError is thrown when the current URL only has empty path segments and atleast 2 empty path segments.

Example 1:

Example 2:

Code:

To Reproduce

1. Use the LocationProvider component.
2. Navigate to an URL with only empty path segments and more than one empty path segments.

Expected behavior
Should navigate to either the default route or a "/" route.

Fix
The error is thrown by the LocationProvider component inside the first useMemo call.
When the new URL(url, base) is called with a relative URL '//'(or more empty slashes), then it seems it is treated as a protocol-relative URL(https://en.wikipedia.org/wiki/URL#Protocol-relative_URLs).

Example1:

Created here:

So these URL objects don't match the actual URL anymore.

An idea to fix is to pass the full URL to the URL constructor as a single argument.
That seems to work fine.

[rschristian]

Never use screenshots in a bug report please, copy/paste code and errors into codeblocks instead. I'm quite certain every maintainer would agree that screenshots are much harder to read, not to mention more accessible, as you haven't even added any meaningful alt text to these.

---

I'm struggling to call this a bug, by all means you're trying to use an invalid URL. I'm not in love with falling back to the default (falling back to / would be incorrect, certainly a no-go) but that being said, PRs are welcome I suppose.

An idea to fix is to pass the full URL to the URL constructor as a single argument.
That seems to work fine.

The url & base parameters of the URL constructor cannot be replaced by plain concatenation, no. From MDN:

When a base is specified, the resolved URL is not simply a concatenation of url and base. Relative references to the parent and current directory are resolved relative to the current directory of the base URL, which includes path segments up until the last forward-slash, but not any after. Relative references to the root are resolved relative to the base origin. For more information see Resolving relative references to a URL.

MDN Docs

For example:

const url = new URL('../bar', 'https://github.com/foo');
console.log(url.href); // `https://github.com/bar`

[rschristian]

Going to close this out, I don't think it's something worth supporting and no one's made a PR to address it.