How to handle dynamic route segments with redirects

[lukasbash]

Given the following structure:

const modelRoute = createRoute({
  getParentRoute: () => indexRoute,
  path: "model",
  component: SomeLayoutComponent
});

const modelIndexRoute = createRoute({
  getParentRoute: () => modelRoute,
  path: "/",
  component: SomeTableComponent,
});

const modelIdRoute = createRoute({
  getParentRoute: () => modelRoute,
  path: "$model_id",
  loader: () => {
    // Might want to preload model data here with
    // queryClient.ensureQueryData( ... )
  },
});

const modelGeneralRoute = createRoute({
  getParentRoute: () => modelIdRoute,
  path: "general",
  component: ModelGeneralPage,
});

const modelFieldsRoute = createRoute({
  getParentRoute: () => modelIdRoute,
  path: "details",
  component: ModelDetailsPage,
});

In general I was trying to avoid code duplication and encapsulate the preloading of a model in a dynamic route segment's loader. Fine, this is working. Now I want to implement two requirements:

Requirement 1:
If the user for some reason visits the url /model/$model_id (does not matter whether via URL or any component), he should be redirected to some other child route. Now, whenever I use throw redirect or router.navigate inside the loader (also in beforeLoad) I end up in an endless loop in the loader as apparently the parent node is visited when navigating down to a child. How can I achieve this? I hope the answer is not hack-ish like this approach I managed to randomize:

 if (!location.pathname.endsWith(`/${params.model_id}`)) {
   return;
 }

But in the end this seems very hacky...

Requirement 2:
Generally speaking I would like to restore the last visited route of a specific route tree. Let's say we add another "base" route /settings, with the same hierarchy as the model's. Imaging the user navigates from /models/$model_id/details to /settings/$setting_id/general and now wants to go back. The requirement is to restore the last active view of the /models sub-tree. Is this even possible (thinking about history state, etc.) without storing those values in some external state? I tried to look into the router history and search the last valid entry, but it seems like those entries are not exposed. Any ideas on how to achieve this?

[ViewableGravy]

Sorry, I don't have the code on me at the moment, but I did make a helper function in my works project for this exact scenario. But generally, the "solution" that I ended up with was to create a function that accepts the beforeLoad opts, and using this, build the location and compare it to the current location.

So for example, from beforeLoad (and loader) you receive a buildLocation function which takes in navigate props and pops out a location object. you can make a function that accepts the opts, builds the current location, and then compares it to the location you are expecting to match.

You'd call this something like

beforeLoad(opts) {
    redirectDirectMatch({ from: "/model/$model_id", params: opts.params })(opts);
}

In this particular example, it's just a HOF that accepts the opts and would build your location and compare it to the current one.

Personally, I agree, a first party way to easily match an exact match would also be nice, but the implementation on a helper function like this is pretty straightforward as well (other than the types).

Can't help too much on the history situation, haven't worked with it, so hopefully someone else has some suggestions