like-gold

Why Route.id is undefined?

Hey 👋🏽 , I'm sure following has worked with a version released last week. With the current version it does not work

import {
  createFileRoute,
  getRouteApi,
} from "@tanstack/react-router";

export const Route = createFileRoute("/app/component")({
  component: MyComponent,
});

console.log("Route.id", Route.id); // with current version Route.id returns undefined, I would expect "/app/component"
const routeApi = getRouteApi(Route.id);

function MyComponent() {
  const navigate = routeApi.useNavigate();
}

import {
  createFileRoute,
  getRouteApi,
} from "@tanstack/react-router";

export const Route = createFileRoute("/app/component")({
  component: MyComponent,
});

console.log("Route.id", Route.id); // with current version Route.id returns undefined, I would expect "/app/component"
const routeApi = getRouteApi(Route.id);

function MyComponent() {
  const navigate = routeApi.useNavigate();
}

If I do console.log(Route), I get an output, where I can see the id-prop. But accessing it, results in undefined. Can sombody help? Thanks

18 Replies

stormy-gold•2y ago

Because of the way file-based routing works, when you are calling getRouteApi over there, it would be undefined since the Router wouldn't have booted-up yet. You'll need to pass in a string to get it working. But it should have auto-complete from typescript. If not, you could even skip the getRouteApi helper entirely, and get access to the typed hooks by accessing them via the Route.

like-goldOP•2y ago

thanks @Sean Cassiere I'm using plain JavaScript. You mean?

import {
  createFileRoute,
  getRouteApi,
} from "@tanstack/react-router";

export const Route = createFileRoute("/app/component")({
  component: MyComponent,
});

function MyComponent() {
  const context = Route.useRouteContext();
  // const navigate = Route.useNavigate(); useNavigate-hook is missing at the Route
}

import {
  createFileRoute,
  getRouteApi,
} from "@tanstack/react-router";

export const Route = createFileRoute("/app/component")({
  component: MyComponent,
});

function MyComponent() {
  const context = Route.useRouteContext();
  // const navigate = Route.useNavigate(); useNavigate-hook is missing at the Route
}

If yes, I understand, but the useNavigate-hook is missing from the route. Is there a reason for this? It would make sense in my opinion. What do you think? thanks

stormy-gold•2y ago

Yup, adding it makes sense. Could you reference this comment and open an issue for it please? I'm out for pretty much the whole day, but I can look at implementing it sometime in evening or tomorrow.

like-gold•2y ago

it was added in this PR by @TkDodo 🔮 https://github.com/TanStack/router/pull/1350 which version are you using ?

GitHub

feat: add useNavigate to RouteApi by TkDodo · Pull Request #1350 · ...

stormy-gold•2y ago

It was only added to the RouteApi class. But wasn't added to the FileRoute class or the LazyRoute class. https://github.com/TanStack/router/blob/9d099dd755344a3aea9625f935a3e68509bd5ece/packages/react-router/src/fileRoute.ts#L106

GitHub

router/packages/react-router/src/fileRoute.ts at 9d099dd755344a3aea...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

stormy-gold•2y ago

So it's not returned by createFileRoute or createLazyFileRoute. I've just been going through the implementation of createFileRoute, and you should be able to get the route id from Route.options.id. But, I'd wouldn't recommend using it, and rather pass in a string to getRouteApi instead.

stormy-gold•2y ago

I've pulled up a PR for this. https://github.com/TanStack/router/pull/1385

GitHub

feat: implement the typed useNavigate hook onto the Route and `...

As per our documentation, the Route and LazyRoute classes should have all the same typed-hook as the RouteApi class. However, with the addition of the useNavigate hook to the RouteApi class, we for...

like-goldOP•2y ago

Great! Thanks @Sean Cassiere

like-gold•2y ago

released in 1.24

like-gold•2y ago

this came up again here https://github.com/TanStack/router/issues/1423

GitHub

Route.id is undefined immediately after route creation · Issue ...

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/ed...

like-gold•2y ago

@Sean Cassiere is this a documentation issue? or can this actually be fixed?

stormy-gold•2y ago

The Router doesn't immediately boot up. It takes a hot second for it to evaluate the route tree. It's why folks who try to perform unit tests have realized that they need to sleep for like 10ms. Regarding fixing or documentation, honestly it only matters if there's a use case for it. Right now, other than setting up the route-tree, which is the libs internals, the only time a user should have to be using the created Route would be when accessing the typed-hooks, and by then all of this would be booted up anyways, so it becomes a moot point.

like-gold•2y ago

this sounds a bit strange since JS is single threaded, so the router is not booting up "in parallel" really, right? is there an await missing somewhere? if there is any async initialization happening at all

stormy-gold•2y ago

I mean there is this, but I doubt that'd solve it. https://github.com/TanStack/router/blob/4febb24b0324ca966f4e254be9415fd66a9ce69d/packages/react-router/src/RouterProvider.tsx#L136

GitHub

router/packages/react-router/src/RouterProvider.tsx at 4febb24b0324...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

stormy-gold•2y ago

Thinking more on this, it might be an order of execution thing. Since they are trying to eval the Route before it's ID has actually been set by the router internally.

flat-fuchsia•2y ago

Shouldn't createRoute be async then so that you can await it if you need to ?

stormy-gold•2y ago

Its not an await that happens on the route class instance returned by the createRoute function that missing here. Rather, its needing to wait for the router class to recursively call the .init() method on those route class instances. Because only knowing the whole route-tree can it set ids on those routes. The .init() method can't be called before, since the Route needs to be aware of where it resides in the route-tree, and to do that it needs to call the getParentRoute getter. That getter is set in the routeTree.gen.ts, and not in the actual route file itself.

stormy-gold•2y ago

So its, really all about the actual order of when the code is being evaluated. At runtime, in react-land, this Route.id value will always be present, because when the component that's using the Route instance is run, it could only happen after the router has been set-up. So if someone does.

export const Route = createFileRoute('...')({ component: Comp })

// this would be undefined
// since the Router wouldn't have actually have been started up 
console.log('outside', Route.id)

function Comp() {
  // over here, the Router has started up
  // since this would never be shown if the Router was 'running'
  // so over here, the id would be set
  console.log('inside', Route.id)

  return '...'
}

export const Route = createFileRoute('...')({ component: Comp })

// this would be undefined
// since the Router wouldn't have actually have been started up 
console.log('outside', Route.id)

function Comp() {
  // over here, the Router has started up
  // since this would never be shown if the Router was 'running'
  // so over here, the id would be set
  console.log('inside', Route.id)

  return '...'
}

This is the line that call the .init() method, which is part of the buildRouteTree method And this is the actual implementation of this call. Nothing overly complicated IMO, it just needs to know where it is in the route-tree for setting the Route.id for the bindings and whatnot.

GitHub

router/packages/react-router/src/route.ts at 43d08080c1f85582b86189...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

GitHub

router/packages/react-router/src/router.ts at 43d08080c1f85582b8618...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

Gaming

Programming

Why Route.id is undefined?

Did you find this page helpful?