TanStackT
TanStack•3mo ago•
8 replies
full-green

Navigate to a RouteMatch

Hello folks. First of all, thanks for the amazing work on the library.

I have an app that has a context/project switcher dropdown that allows you to navigate between projects. The behaviour is as follows, given that the user switches to project "b" from "a":

/projects/a/users/abc -> /projects/b/users
/projects/a/users -> /projects/b/user
/projects/a/resources/abc/subresources/xyz -> /projects/b/resources

The way I've approached this is that for all parent routes that are navigated to after a project switch will have a projSwitchTarget boolean flag as part of the staticData. Then, the sidebar layout (which contains the project switcher dropdown) does the following:

const projSwitchTargetMatch = useChildMatches({
  select: (matches) =>
    [...matches].reverse().find((match) => match.staticData.projSwitchTarget),
});


The problem now is that there's no "to" property on "projSwitchTargetMatch" that I can use as the destination to the navigate() call.

I've tried:

navigate({
  to: projSwitchTargetMatch?.fullPath // Fails typecheck, because fullPath contains trailing slashes that "to" does not accept
  params: {
    ...projSwitchTargetMatch?.params,
    proj: nextProjectId
  }
})


navigate({
  to: projSwitchTargetMatch?.routeId // Doesn't work, because routeId can't be used as the destination
  params: {
    ...projSwitchTargetMatch?.params,
    proj: nextProjectId
  }
})


What should I do?

Thanks in advance!
Was this page helpful?