Navigate to arbitrary URL

[BrendanC23]

I'm building an electron app and using deep links. This allows a user to enter my-app://some-path and be directed to the electron app.

Currently, I am doing the following:

// Copy the current URL
const hashUrl = encodeURIComponent(window.location.hash);
await navigator.clipboard.writeText(`my-app://${hashUrl}`);

// When a link is opened, redirect to the correct route
window.electron.onDeepLink((value: string) => {
    const urlHash = decodeURIComponent(value);

    window.location.hash = urlHash;
});

As I am using Electron, I am using the hash history. The link is like my-app://#/route-name (encoded as my-app://%23%2Froute-name). The issue is that using window.location.hash = urlHash means that I am working outside of TanStack Router, which means things like navigation blocking do not work (I'd like to show a confirmation dialog before navigating if the user is in the middle of filling out a form).

Is there a way to call navigate() without type safety, passing in something like /my-route?search=123 instead of a separate route and params object?

[schiller-manuel]

how about router.history.push('/my-route?search=123')?

[BrendanC23]

Thanks! This worked great.

[BrendanC23]

Is there a way to build a full dynamic URL? I want to build a URL and then call window.open() to open it in a new tab.

I found router.buildLocation (docs) which has part of the solution. It returns the URL split into parts (href, pathname, etc.) but not the fully-built URL. I'm using the hash router.

const route = router.buildLocation({ to: "/abc", search: { param: 1 } });
const url = window.location.origin + "/#" + route.href;

window.open(url, "_blank"); // http://localhost:5173/#/abc?param=1

Is there a way to get the full URL entirely within TanStack Router?

[schiller-manuel]

not fully, but close:

const next = router.buildLocation({ to: "/abc", search: { param: 1 } });
const href = router.history.createHref(next.href)
const url =`${window.location.origin}${href}`