genetic-orange

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

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?.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!

5 Replies

subsequent-cyan•4w ago

do you just want to change a path param? then navigate({to:'.', params:{...}) should do it

genetic-orangeOP•4w ago

@Manuel Schiller Hey thanks for quick response! I actually don't just want to change the path param. For example, /projects/a/users/b should redirect to the parent users page as /projects/b/users, not /projects/b/users/b, because the user b may not exist in project b, if that makes sense

subsequent-cyan•4w ago

so navigate to the parent then? can you provide a complete minimal repro for this?

genetic-orangeOP•4w ago

@Manuel Schiller I'm not to sure what's to do for a repro because it's technically not a bug, and I'm not sure if I'm approaching this correctly. I mean, if you are viewing a specific user (user 1) in project "a" at: /projects/a/users/1 And you switch to project b, you should be redirected to: /projects/b/users because users in project a don't exist in project b. Similarly, if you had any other routes: /projects/a/invoices/12 switching project to b should redirect to: /projects/b/invoices The project switcher is under /projects/:projectId, and I've marked the target parent pages with a flag under staticData, so i just want to navigate to the child match (in reverse) with the flag

subsequent-cyan•4w ago

doesnt have to be a bug but a repro project would just show your route structure and what you exactly do here

Gaming

Programming

Navigate to a RouteMatch

Did you find this page helpful?