T
TanStack•17mo ago
flat-fuchsia

Linking to the same child-page with a different path-parameter from root component (nav-bar)

Hi! <Aside> I'm new to typescript and react and found this awesome library for dealing with routes. Love it! Thanks for putting in the time and effort to create such a wonderful helper! </Aside> I'd like to provide some entries in the navbar (which lives in the __root route) that link to the "current route" with different path-params while keeping the search params identical. I found a hacky way to do that in the root component, but I wonder if I'm missing something that would make it simpler and without repeating this step for every route. Please take a look at this codesandbox. https://codesandbox.io/p/devbox/xenodochial-lamport-zkzx68?file=%2Fsrc%2Froutes%2F__root.tsx%3A21%2C1-49%2C1&workspaceId=23e9b0ac-bbaa-4a18-a8e1-bfec70b31295 I forked one of the example apps to showcase what I mean. In the nav-bar I added links to all other posts that keep the search-params. Go to the posts index page and click on one of the links to an individual post. (I added some search parameters to the links to get started) Any tips on how to improve the generation of deep-links from the root component based on the current location would be appreciated. Thanks in advance!
4 Replies
rising-crimson
rising-crimson•17mo ago
You want to persist the search params across navigation yes? Or are you asking about sending data up the tree to the root route? For this, you could either supply search: true or search: (s) => s on your links which'd preserve the search params. 
  if (deepestMatch?.routeId == "/posts/$postId") {
    links = postIds.map((id) => {
      return (
        <Link
          to="/posts/$postId"
          params={{ postId: id }}
          search={true}
          className="[&.active]:font-bold"
        >
          Post {`#${id}`}
        </Link>
      );
    });

// or

  if (deepestMatch?.routeId == "/posts/$postId") {
    links = postIds.map((id) => {
      return (
        <Link
          to="/posts/$postId"
          params={{ postId: id }}
          search={s => s}
          className="[&.active]:font-bold"
        >
          Post {`#${id}`}
        </Link>
      );
    });
  if (deepestMatch?.routeId == "/posts/$postId") {
    links = postIds.map((id) => {
      return (
        <Link
          to="/posts/$postId"
          params={{ postId: id }}
          search={true}
          className="[&.active]:font-bold"
        >
          Post {`#${id}`}
        </Link>
      );
    });

// or

  if (deepestMatch?.routeId == "/posts/$postId") {
    links = postIds.map((id) => {
      return (
        <Link
          to="/posts/$postId"
          params={{ postId: id }}
          search={s => s}
          className="[&.active]:font-bold"
        >
          Post {`#${id}`}
        </Link>
      );
    });
This'd require the use of context or state management.
flat-fuchsia
flat-fuchsiaOP•17mo ago
That sounds like a better way to think about it. I want my routes to have a way to render stuff in the nav-bar (which lives in the root-route. Do you have an example of what you mean by "context or state management"?
rising-crimson
rising-crimson•17mo ago
the authenticated routes example uses context, but honestly this is out of the realm of Router. You'd just be using something like React Context or zustand to push data from a child to the parent.
flat-fuchsia
flat-fuchsiaOP•17mo ago
I see. Thanks for taking the time to look into it.

Did you find this page helpful?