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

TanStack•2y ago•

39 replies

worthy-rose

Optimum way to use route context in a component?

  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

Optimum way to use route context in a component?

Similar Threads

Optimum way to use route context in a component?

Similar Threads

Similar Threads

Similar Threads