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

projSwitchTarget

boolean flag as part of the

staticData

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),
});

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()

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?.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
  }
})

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!

TanStack•5mo ago•

8 replies

full-green

Navigate to a RouteMatch

projSwitchTarget

projSwitchTarget

boolean flag as part of the

staticData

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),
});

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()

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?.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
  }
})

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!

Navigate to a RouteMatch

Similar Threads

Navigate to a RouteMatch

Similar Threads

Similar Threads

Similar Threads