Question

I'm using Tanstack Router and Tanstack Start and I'm wondering if there's a way to do something like:

const path = buildPath({ to: "/$lang/posts/$id", params: { lang, id }});

so that path is the resolved string and buildPath only accepts type safe to and params.

Specific use case

I'm using OAuth as an authentication method and I have an api route at /api/auth/google which accepts a redirect query param so that once the authentication is complete the flow ends by redirecting to redirect and I'd like to pass a valid path to this redirect query param like so:

const path = buildPath({ to: "/$lang/posts/$id", params: { lang, id }});

// ...

<a href={`/api/auth/google?redirect=${encodeURIComponent(path)}`}>...</a>

Question

I'm using Tanstack Router and Tanstack Start and I'm wondering if there's a way to do something like:

const path = buildPath({ to: "/$lang/posts/$id", params: { lang, id }});

so that path is the resolved string and buildPath only accepts type safe to and params.

Specific use case

I'm using OAuth as an authentication method and I have an api route at /api/auth/google which accepts a redirect query param so that once the authentication is complete the flow ends by redirecting to redirect and I'd like to pass a valid path to this redirect query param like so:

const path = buildPath({ to: "/$lang/posts/$id", params: { lang, id }});

// ...

<a href={`/api/auth/google?redirect=${encodeURIComponent(path)}`}>...</a>

• reactjs
• typescript
• tanstack
• tanstack-router

• What is buildPath? I don't see any reference to it in the Tanstack documentation or repo. Can you edit to include a complete minimal reproducible example and link to any reference/documentation material you are working from? – Drew Reese Commented Mar 9 at 18:38
• @DrewReese It's an hypothetical utility function that, as described, takes typesafe { to: ..., params: ... } (the props you pass to a <Link> component) and returns a string with the URL path that can be built with those props. Anyway I found my answer in the discord server and cross posted it here. Thanks. – Shoe Commented Mar 10 at 9:42
• @DrewReese Also not sure why you removed the typescript tag and added the javascript tag. This is a typescript only question as implied by the "typesafe" part of it. I've undone your changes but let me know if there was a good rationale behind it. – Shoe Commented Mar 10 at 9:44
• 1 No worries. I didn't see any Typescript-specific code (i.e. types, interfaces, etc) and your question didn't appear to be specifically about anything Typescript-specific, especially since, as I said, I couldn't find anything about this "buildPath" utility function in the docs to access any type declarations on it, so I re-tagged to the more broad javascript tag to increase visibility. – Drew Reese Commented Mar 10 at 15:26

1 Answer 1

You can build a pathname using:

const router = useRouter();

and then:

router.buildLocation({ to: "...", params: { ... }, search: { ... }});

this will return a string that can be used anywhere.

Credits to Manuel Schiller from the Tanstack Discord Server.