How to handle reusable routes and keep typesafety?

[SteNafH]

Hello everyone, I'm currently developing an application that involves checking dependencies for repositories. I recently
came across @tanstack/router and was impressed by its type-safe routing and the way it handles search parameters.

However, I'm facing challenges in implementing routing for my application, particularly when dealing with reusable
routes. For instance, my "Dependency" route should be accessible through multiple paths. I'm wondering if there are any
examples available on how to effectively work with reusable routes.

I'm uncertain whether I need to manually specify each route. My concern is that if I do this, I might lose
the benefits of type safety, as the {from: ...} needs to be specified in both useSearch and useParams. Are there
any suggestions or examples on how to maintain type safety while working with reusable routes in this context?

Underneath is hopefully a more detailed visualization of my application routes:

- /repositories (Lists all repositories)
  - /:repository (Lists commits for repository)
    - /:commit (Lists dependencies for commit)
      - /:dependency (Lists cves for dependency)

- /dependencies (Lists all dependencies)
  - /:dependency (Lists commits that use dependency)
    - /cves (Lists cves for dependency)
    - /:commit (Lists dependencies for commit)
      - /:dependency (Lists cves for dependency)

- /licenses (Lists all licenses)
  - /:license (Lists all dependencies that use license)
    - /:dependency (Lists all commits that use dependency)
      - /cves (Lists cves for dependency)
      - /:commit (Lists dependencies for commit)
        - /:dependency (Lists cves for dependency)

A graph for the application flow:

Dependencies   Repositories        Licenses
     \               |               /
   Dependency   Repository       License
       \             |             /
        \ ──────> Commit  <── Dependency
         \           |           /  
          \──────> Cves <───────/

I prefer to youse code based routing, but any insight is welcome!
Thanks in advance

[thyming]

my workaround for this has been to do the following:

• export the typeof Route for each route you're going to be reusing a component for
• wrap the component with a provider that provides the route object to the reused component
• use the route from the context in the component, which will have the route types intersected in a way that it will be type-safe

for example:
Ctx.tsx

type Routes = typeof Route1 | typeof Route2
export const Ctx = React.createContext({} as Routes)

Route1.tsx

export const Route1 = createFileRoute('/route1')({
  component: () => <Ctx.Provider value={Route1}><ReusedComponent /></Ctx.Provider>,
  loader: () => Promise.resolve("1")
})

Route2.tsx

export const Route2 = createFileRoute('/route2')({
  component: () => <Ctx.Provider value={Route2}><ReusedComponent /></Ctx.Provider>,
  loader: () => Promise.resolve("2")
})

ReusedComponent.tsx

export const ReusedComponent = () => {
  const route = useContext(Ctx);
  const data = route.useLoaderData(); // this will be correctly typed as string
  return <pre>{JSON.stringify(data)}</pre>
}

This is pretty clunky, but it does achieve the objective of sharing route context in a component across multiple routes. Maybe someone has an idea about how to support this functionality in a bit more elegant way?