`Route.id` is `undefined` immediately after route creation

[happycollision]

Describe the bug

Immediately after creating a new route, the Route.id is undefined.

const myRoute = createRoute(opts)

myRoute.id
//      ^ undefined

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-n22e5x?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

1. Go to the url provided above.
2. Open the console.
3. Observe the logs that show what the aboutRoute id is. (see image below)

Expected behavior

I expect that when I have created a route, I can immediately use the route's id property.

In the context of my repro, I expect that both logs in the console will say that the route id is /about.

Screenshots or Videos

(Don't come at be for the bad function names! 😜 I refactored and didn't rename, ok?!)

Platform

• OS: macOS
• Browser: Chrome & Safari
• Version:
  • Chrome Version 123.0.6312.107 (Official Build) (arm64)
  • Safari Version 17.4.1 (19618.1.15.11.14)

Additional context

This is a bit of a tangent, so here we go...

For some of my components, I need to fake out TS to tell the router "you are definitely at one of these routes", so I do stuff like this:

const route = useMatch({ strict: false } as unknown as {
	from: typeof someRoute.id | typeof anotherRoute.id
})

Works fine, since that is just type information. But if I want to be sure I am safe at runtime, I can do this

const someRoute = createRoute({/* ... route def ...*/})
const anotherRoute = createRoute({/* ... route def ...*/})

const myRouteIds = [someRoute.id, anotherRoute.id] as const
type MyRouteId = typeof myRouteIds[number]

export function useMyRouteId() {
	const routeId = useMatch({ strict: false, select: x => x.routeId })
	if (!myRouteIds.has(routeId as MyRouteId)) {
		throw new Error("You are not on one of my routes!!11!!")
	}
	return routeId as MyRouteId
}

(I don't do it quite like that, but this was simpler for an example.)

Except... I can't. Because myRouteIds captures a bunch of undefined values, since they are not available immediately.

Of course, you can work around this, but it sure was surprising to discover.

[SeanCassiere]

In my experience, TSR takes a second to boot up. So at runtime, if you are trying to use the Route, it will be undefined for a moment because TSR needs to first traverse the route-tree.

But this is rarely a problem, since you should really only ever be using the Route for accessing stuff in react-land and not outside.

To get your useMyRouteId() hook to work, you augment the hook to evaluate the route-ids in react-land, instead of being outside. Like:

const someRoute = createRoute({/* ... route def ...*/})
const anotherRoute = createRoute({/* ... route def ...*/})

export function useMyRouteId() {
        const myRouteIds = [someRoute.id, anotherRoute.id] as const
        type MyRouteId = typeof myRouteIds[number]

	const routeId = useMatch({ strict: false, select: x => x.routeId })
	if (!myRouteIds.find(r => r === myRouteIds) {
		throw new Error("You are not on one of my routes!!11!!")
	}
	return routeId as MyRouteId
}

If you have any suggestions for where this messaging would go best in docs, I'm happy to hear any ideas on that.

[happycollision]

I'm not even sure there would be a great place in the docs to explain that the value isn't available until later.

A quick look at the route constructor and subsequent init method seem to suggest that there isn't really a reason that the value can't be known at instantiation.

Is the team amenable to a contribution that makes that value available right away? If so, I can give it a closer look within the next couple weeks and create a PR if it is as simple as I hope. 🤞

[happycollision]

Heh. I couldn't resist tinkering a bit, and it was a fairly quick change. #1425

It's ok if it gets rejected. Now I know a little more about what goes into the route properties.

[SeanCassiere]

Heh. I couldn't resist tinkering a bit, and it was a fairly quick change. #1425

It's ok if it gets rejected. Now I know a little more about what goes into the route properties.

Always happy to see folks toying around with the Router.

I've left some feedback on your PR.

A quick look at the route constructor and subsequent init method seem to suggest that there isn't really a reason that the value can't be known at instantiation.

You aren't wrong about this assumption, but this gets broken down during file-based routing and code-splitting.

[happycollision]

Some of the weirdness with types that I didn’t understand makes more sense now. I’ll do a deeper dive into the codebase and make some changes. Thanks!!