Navigate to an external url prob
Hello, I'm encountering this problem while trying to redirect the user to an external URL in the loader function.
This is my logic:
Fetching products.
If the returned list is empty, I will redirect the user to the external URL.
I've tried using "throw redirect/navigate," but it hasn't worked.
if (!products.length) {
throw redirect({ to: https://externalurl.com/ });
}
error => Error: Invariant failed: Attempting to navigate to external url with this.navigate!
2 Replies
useful-bronze•16mo ago
As I know, you cannot navigate to an external URL with tanstack router as it is not designed for this. You should use JavaScript to do that, like window.location.replace
secure-lavenderOP•16mo ago
@Maqui
Yes, currently, I'm implementing this functionality using JavaScript. However, a challenge arises with window.location.href being synchronous, causing the navigation process to vary in duration based on factors like the user's network speed. This poses an issue when placed within the loader function, as it executes all code in sequence: pending component rendering, followed by the main component, and finally, navigation to the external URL.
To address this, I aim to maintain the pending component until the navigation is complete. My current solution involves checking the length of the product list in the main component. If it's zero => render pending component. However, this method lacks elegance.
I think we need something like an await redirect to external url.
Anyway thanks