[Bug]: "TypeError: URL constructor: // is not a valid URL" while using data router about react-router HOT 9 OPEN

Also, interestingly, examples that don't use data router on StackBlitz appear to work fine so this seems to be something specific to data routers.

The auth example doesn't have this issue:
https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth

from react-router.

@brophdawg11 Maybe a regression from things changed around the time of #10005?

from react-router.

What version of vite are you using? The error stack comes from vite middleware so I'm not sure if this is related to RR code?

It also doens't look like it happens on Vite 5 - I crewated a brand new vite app from https://vitejs.dev/guide/#trying-vite-online and added a data router and trailing double slashes don't cause an issue:

https://stackblitz.com/edit/vitejs-vite-uwqys1

from react-router.

Oh dang, it looks like the error is different on StackBlitz than it is on my own apps. Sorry, I should've double checked that. Let me see if I can get a minimum repro based off my apps. The stack trace I get does point to node_modules/@remix-run/router/dist/router.js as the origin of the error

from react-router.

The error comes from using the navigate function provided by useNavigate or the Navigate component. Please see this StackBlitz: https://stackblitz.com/edit/vitejs-vite-ht64rf?file=src%2FHomePage.jsx

Navigation with either button will work initially, but if you add the double slash to the url in the preview pane, both of them will stop working. Your browser console will display the error.

from react-router.

We'll look into this in #11924 but I think in general I would recommend doing some app-level detection of these invalid URLs and trigger a hard reload to get the user back to a valid URL:

let { pathname, search, hash} = window.location
if (pathname.includes('//')) {
  window.location = pathname.replace(/\/{2,}/, '/') + search + hash
} else {
  hydrateRoot(el, <App />);
}

I'm curious the use-case is where you end up with a double slash in the first place?

from react-router.

Nothing in my application will cause this, but it's something a user can do if they felt like it. Which I guess someone did, because I have a Sentry error event with this error, haha.

from react-router.

If this is one singular occurrence from one user who seems to have manually manipulated the URL and gotten an error page, I'm not sure it's something that needs to be addressed at the React Router level to try to correct/sanitize invalid URLs. Can you fix this with the suggestion in #11911 (comment)?

from react-router.

That's a fair point. I personally don't mind if you don't address this. I just wanted to report it because it's an unhandled error. I forgot to acknowledge it but the suggested solution is perfectly acceptable to me and I'm already using it so thank you for that.

from react-router.