other-emerald

Optimum way to use route context in a component?

Hi everyone, This may be quite a basic question (!) I am wondering the best way to use context that is provided at top level RouterProvider, in a component that is outside a page/component located in the routes folder? e.g. index.tsx inside routes imports component.tsx from src/mycomponents - how should component.tsx access context? when I tried it like this:

  const { authStatus } = useRouteContext({
    from: "/",
  })

  const { authStatus } = useRouteContext({
    from: "/",
  })

I got error:

Invariant failed: useMatch("/") is being called in a component that is meant to render the '__root__' route. Did you mean to 'useMatch("/", { strict: false })' or 'useRoute("/")' instead?

Invariant failed: useMatch("/") is being called in a component that is meant to render the '__root__' route. Did you mean to 'useMatch("/", { strict: false })' or 'useRoute("/")' instead?

Thank you very much

25 Replies

rival-black•2y ago

for now you can exactly do what the error says:

useRouteContext("/", { strict: false })

useRouteContext("/", { strict: false })

other-emeraldOP•2y ago

Thanks for the quick reply! May I ask was I doing the correct thing and is the strict to false a bad practice? (hoping to learn understand better)

rival-black•2y ago

not bad practice. currently, strict is... TOO strict

other-emeraldOP•2y ago

like 70s public school strict !

rival-black•2y ago

at least 😄 we are planning to loosen it up a few decades

other-emeraldOP•2y ago

The error was a bit confusing with "useMatch"

rival-black•2y ago

yeah that's the underlying primitive hook that useRouteContext uses

other-emeraldOP•2y ago

Gotcha. Cool thank you very much, Manuel Also I should still be using "from", rather than just "/" ?

rival-black•2y ago

no i was typing nonsense

useMatch({from: '/', strict: false})

useMatch({from: '/', strict: false})

other-emeraldOP•2y ago

useRouteContext rather?

rival-black•2y ago

yeah of course

other-emeraldOP•2y ago

I get TS errors

  const { authStatus } = useRouteContext({
    from: "/",
    strict: false,
  })

  const { authStatus } = useRouteContext({
    from: "/",
    strict: false,
  })

It errors out when assiging false value, but accepts true value

Types of property 'strict' are incompatible.
    Type 'false' is not assignable to type 'true'.

Types of property 'strict' are incompatible.
    Type 'false' is not assignable to type 'true'.

rival-black•2y ago

yeah sorry... discord needs to embed a VS code instance 😄 so I cannot type invalid TS to begin with if strict: false is specified, you cannot supply a from

useRouteContext({
    strict: false,
  })

useRouteContext({
    strict: false,
  })

other-emeraldOP•2y ago

Oh okay, as the docs say the from is required, but I am guessing that strict false removes that requirement

rival-black•2y ago

the from is just used to narrow then typing where does it say so?

other-emeraldOP•2y ago

https://tanstack.com/router/latest/docs/framework/react/api/router/useRouteContextHook

useRouteContext hook | TanStack Router Docs

The useRouteContext method is a hook that returns the current context for the current route. This hook is useful for accessing the current route context in a component. useRouteContext options

other-emeraldOP•2y ago

rival-black•2y ago

hm yes, needs to be fixed

rival-black•2y ago

compare against https://tanstack.com/router/v1/docs/framework/react/api/router/useMatchHook

useMatch hook | TanStack Router Docs

The useMatch hook returns the closest RouteMatch in the component tree. The raw route match contains all of the information about a route match in the router and also powers many other hooks under the hood like useParams, useLoaderData, useRouteContext, and useSearch. useMatch options

other-emeraldOP•2y ago

Aha 🙂 we have figured it out! nice one thanks again Working now. I guess the "disadvantage" of this is the loss of type safety as the useMatch doc describes

rival-black•2y ago

yes however we are working on allowing a from that is a parent of your current route

other-emeraldOP•2y ago

Gotcha, which would allow the root route then Nice 🙂

rival-black•2y ago

FYI , we released https://github.com/TanStack/router/releases/tag/v1.22.3

GitHub

Release v1.22.3 · TanStack/router

Version 1.22.3 - 3/22/2024, 10:55 PM Changes Fix do not use CatchBoundary if neither route nor router default error component is configured (#1355) (c5c325d) by Manuel Schiller loosen strict check...

rival-black•2y ago

in your case you would use

import {
  useRouteContext,
  rootRouteId,
} from '@tanstack/react-router'

const { authStatus } = useRouteContext({
    from: rooteRouteId
  })

import {
  useRouteContext,
  rootRouteId,
} from '@tanstack/react-router'

const { authStatus } = useRouteContext({
    from: rooteRouteId
  })

other-emeraldOP•2y ago

Hah amazing, what a turnaround time! well done! working 😄

Gaming

Programming

Optimum way to use route context in a component?

Did you find this page helpful?