How can I create a dynamic back button/page structure in remix so that the back button navigates back to the parent page?

Question

I have a Remix app which has "loops" in it where two different parent routes lead to the same child.

main/projects/$projectSlug (this one should go back to main/projects)
main/folders/$folderId/projects -> main/projects/$projectSlug (this one should go back to folderId/projects)

A user can either navigate to a project via projects or via a folder which contains that project.
How can I create a back button that navigates to the appropriate parent route?

Problems:

• Because I have subpages within the projectSlug page, I can't use navigate(-1) because it only navigates back to the previous subpage instead of the parent URL

• I have tried slicing the end off the URL but this does not take into account the different contexts

• I have tried to use a context to save the previous state but this doesn't work due to subpages and reloads of the same page

  My current best attempt uses a combination of path slicing and passing state down through my links but this still doesn't take me back to the right page.

  let backPath = currentPathArray
      .slice(0, currentPathArray.length - levelsBack)
      .join("/");
  
    useEffect(() => {
      if (router?.state?.previousPath) {
        backPath = router?.state?.previousPath;
        console.log("BACK", backPath);
      } else {
        console.log("NO PATH");
      }
    }, [router]);
  
    return (
      <NavLink
        to={backPath}
      >
  

  I have checked out a lot of answers but I can't figure out what is best for my particular case. Going forward, we will need a lot more of this kind of functionality to navigate up and down in different contexts so if anyone has pointers it would be much appreciated.