How to programatically create and copy route URLs?

[jameslawson]

Context

I'm migrating my app from react-router to tanstack/router. I'm current stuck migrating a feature where users can click a menu item that copies a URL to the clipboard.

This menu component is reusable and used in a few screens: the component itself doesn't know exactly what to copy, this info passed down via a React prop.

With react-router:

• a parent component makes a call to generatePath to generate a string
• this was passed down to the component. The component itself accepts this as a prop url.
• when the appropriate menu item is selected ("Copy Permalink") it copies this string to the clipboard.
• I didn't simply copy window.location.href to clipboard because for this particular app, only certain parts of the URL are important for the permalink and other parts should be ignored

Question: What's the best approach for migrating this to tanstack-router?

---

Code

Before migration (react-router)

interface Props {
  url: string;
  // ....
}
export default function MoreMenu({ url }: Props) { 
   // ...
  const onCopyClick = () => {
       copyToClipboard(url);
   }
}  

After migration (tanstack/router) ??

I figured I could pass ToOptions down to the component and let it generate the full URL. But I'm encountering type errors.

import type { ToOptions } from '#/app/router';
import { useLinkProps } from '@tanstack/react-router';

interface Props {
  toOpts: ToOptions;
  // ....
}
export default function MoreMenu({
   toOpts
   // ...
}: Props) {
   // ...
   const props = useLinkProps(toOpts);
                           // ^~~~~~ ERROR here [*]
   const href = props.href;
   const onCopyClick = () => {
       copyToClipboard(href);
   }
    // ...
}

app/router.ts

import type {
  RouteIds as RouteIdsTanStack,
  ToOptions as ToOptionsTanStack,
} from '@tanstack/react-router';
import { createRouter } from '@tanstack/react-router';
import { rootRoute } from './router/index';

// #/app/router/router.ts
const routeTree = rootRoute.addChildren([
  // ...
]);
const router = createRouter({ routeTree });

export { router };

export type RouteTree = typeof routeTree;
export type RouteIds = RouteIdsTanStack<typeof routeTree>;
export type ToOptions = ToOptionsTanStack<RouteTree>;

It seems I can't pass an object of type ToOptions to useLinkProps (which is little bit unexpected for me)?

Argument of type 'ToOptions' is not assignable to parameter of type 'UseLinkPropsOptions<Route<any, "/", "/", string, "__root__", RootSearchSchema, RootSearchSchema, RootSearchSchema, RootSearchSchema, ... 11 more ..., any>, string, "" | ... 29 more ... | "/privacy", string, "">'.
  Type 'ToOptions' is not assignable to type 'CheckPathError<Route<any, "/", "/", string, "__root__", RootSearchSchema, RootSearchSchema, RootSearchSchema, RootSearchSchema, ... 11 more ..., any>>'.
    Types of property 'to' are incompatible.
      Type 'ToPathOption<Route<any, "/", "/", string, "__root__", RootSearchSchema, RootSearchSchema, RootSearchSchema, RootSearchSchema, ... 11 more ..., any>, string, ""> | undefined' is not assignable to type 'RoutePaths<Route<any, "/", "/", string, "__root__", RootSearchSchema, RootSearchSchema, RootSearchSchema, RootSearchSchema, ... 11 more ..., any>>'.
        Type 'undefined' is not assignable to type 'RoutePaths<Route<any, "/", "/", string, "__root__", RootSearchSchema, RootSearchSchema, RootSearchSchema, RootSearchSchema, ... 11 more ..., any>>'

I can't find any examples for the intended use of useLinkProps, are we supposed to be able to pass ToOptions to useLinkProps? And if not is there an alternative approach where I can programatically generate a full url using the state: from/to/params/search? The ancestor react components have access to all this state data and can pass down what's needed. Here I'm looking for the simplest and most idiomatic way for this component to programatically generating the URL given this state with tanstack/router.

Loving tanstack/router so far! Thank you for your time! 🙏

Versions:

"@tanstack/react-router": "1.24.0"
"@tanstack/router": "0.0.1-beta.53"
"react" "18.2.0"
"typescript": "5.3.3"
Google Chrome Version: 123.0.6312.58