Is it possible to adjust the codegenerator to add default export or named export of the Route Name?

[itshallrun]

It looks like good practice to use the Route from createFileRoute to utilize the .to param in Links and alike.

when I create a new file in routes e.g. tableA.tsx

the autogenerated code is:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/tableA')({
  component: () => <div>Hello /tableA!</div>
})

Now when I want to use that Route in my App, I end up with something like this:
Which is more or less the same in the autogenerated routeTree

import { Route as RouteTablesA } from './routes/tablesA'
import { Route as RouteTablesB } from './routes/tablesB'
import { Route as RouteTablesC } from './routes/tablesC'

To simplify things and allow for autoimport in my IDE I end up adding named exports in each Route file

//talbeA.tsx
export const RouteTableA = Route

which leads to this import:
import RouteTableA from './routes/tableA'

Is it possible to autogenerate that named export? Why isn't tanstack using a named export based on the filename in the first place?

Am I possibly doing something wrong here, and utilizing the Route like that is not meant to be done?

[schiller-manuel]

Why isn't tanstack using a named export based on the filename in the first place?

It's easier to manipulate individual route files, such as updating paths, replacing createLazyFileRoute by createFileRoute etc.

As a recommendation, I would not import routes and use their fullPath property, because you can easily create circular dependencies that TS will not like.

[itshallrun]

@schiller-manuel could you point me in the right direction on how to use relative links with parameters?

The only alternative I see is to type in the path manually, and then pass the params. That seem to be error-prone and cumbersome.

E.g. <Link from={"/tables/$tableId/"} to="./details" params={{tableId:...}} .../> instead of <Link from={TablesRoute.fullPath} to={TableDetailsRoute.to}/>

[schiller-manuel]

there is no other way than using string literals. But why would it be error prone? you get type checking, so the only error that could happen is that you choose the wrong route, which could also happen with importing the wrong route.

[itshallrun]

I think errorprone, because if you move any of the routes, you would have to adjust all the strings. Which would not happen with the Import.
On the other hand, typescript should help you out here.

Also it feels wrong to pass the params again, even though they are already in the route.
And I am even more confused because I got that part with the fullPath from the docs:
https://tanstack.com/router/latest/docs/framework/react/guide/navigation#relative-links

[schiller-manuel]

you can use Route.fullPath in the component that is rendered by the route without causing circular dependencies.
The problem of those circular dependencies can occur if you import e.g. RouteA in component ComponentB that is rendered on RouteB.

This is why we tend to recommend using string literals instead.

about that "having to pass the param again": you should not have to pass the param again, also if you use string literals.
Maybe there is a bug with relative routes though.
Can you please provide a minimal complete example by forking and adapting one of the existing examples on stackblitz?

[itshallrun]

fork here

In the making, I realized that working with string literals works fine.
Feeding a string literal with $param placeholder to the from prop, works without passing the param itself.
That was probably my misunderstanding here.

On the other hand, I noticed that the code completion for the from prop does not provide any suggestions. Is that a bug?

[schiller-manuel]

code completion works locally for me, so might be a stackblitz issue?