How do I get a value from react context in react-router-dom v6.4's loader?

[zakinadhif]

Hi all!

Currently I'm using react-router-dom + react with auth0's SDK, I'm having a trouble figuring out how to pass the access token from auth0's sdk context into one of my routes' loader. How do I that?

Thank you in advance.

[nahumzs]

Has someone figured out how to do this?

[brophdawg11]

You cannot access React context from loaders and actions because they are, by design, decoupled from the render cycle.

Instead, you should aim to read from the source of truth for the data in question. Hooks are merely a convenience way to access a source of truth + update when it changes. With loaders/actions - RR will handle the "changes" part, so you just need to find the source of truth. I've been meaning to get a diagram of sorts together for this but basically:

source of truth -> Context.Provider -> useContext -> hook -> component
       |
       |-> loader()

Anything you read client-side in a hook comes from somewhere in the client - find that source and read from it in your loader.

[nahumzs]

Answering on this one: Yeah I think I missing the context here, Auth0,

[iamafansev]

I found a global solution.

Using this solution you configure the router context from App. Then this context will be available as the second argument in the loader / action functions.

This involves overriding some types in the @types/router.d.ts file.

iamafansev/vite-spa-template@5bba032