reduced-jade

Link from getRouteApi

Assuming I have a getRouteApi already in scope, is there any shortcut to forming a Link to/from the route my getRouteApi is pointing to without going through a .useMatch() and using its pathname?

const pageApi = getRouteApi('...');
const Cmp = () => {
   const match = pageApi.useMatch();
   return <Link to={match.pathname}>foo</Link>
};

const pageApi = getRouteApi('...');
const Cmp = () => {
   const match = pageApi.useMatch();
   return <Link to={match.pathname}>foo</Link>
};

5 Replies

flat-fuchsia•2y ago

You can use pageApi.id

reduced-jadeOP•2y ago

tried that, not only is ts erroring out, but it doesn't do anything with the _layout segments at runtime

generous-apricot•2y ago

@uncqsun We'd need to a reproduction of this. You can create a reprodction using the Router Stackblitz Starter.

StackBlitz

Router Quickstart File Based). Example - StackBlitz

Run official live example code for Router Quickstart File Based)., created by Tanstack on StackBlitz

reduced-jadeOP•2y ago

https://codesandbox.io/p/devbox/muddy-bush-hv98hn click the About button although I'm not sure what's being brought into question - this seems to all be working as intended, at the very least it matches what I would expect or, to be more specific, is to= supposed to take an id or is getRouteApi supposed to work with a pathname?

optimistic-gold•2y ago

to expects a path so in your case it should be /about this will work

 <Link to={aboutRoute.fullPath} className="[&.active]:font-bold">
          About
        </Link>

 <Link to={aboutRoute.fullPath} className="[&.active]:font-bold">
          About
        </Link>

https://codesandbox.io/p/devbox/vigorous-cache-2y6xdn?file=%2Fsrc%2Fmain.tsx%3A13%2C1

Gaming

Programming

Link from getRouteApi

Did you find this page helpful?