Using hooks in loader

[sandervspl]

I'm using Clerk and need the user's token to make requests to my API. With react-query I would just use useAuth, but I can't use hooks in loader. How do I get data from hooks in loader?

[sandervspl]

For now I've solved it like this:

import { Router, RouterProvider } from '@tanstack/react-router';
import { createRoot } from 'react-dom/client';
import { ClerkProvider, useAuth } from '@clerk/clerk-react';
import { routeTree } from './routeTree.gen';

const router = new Router({
  routeTree,
  context: {
    auth: undefined,
  },
});

const app = document.getElementById('root') as any;

const Root = () => {
  const auth = useAuth();

  return (
    <>
      <RouterProvider router={router} context={{ auth }} />
    </>
  );
};

createRoot(app).render(
  <ClerkProvider publishableKey={process.env.VITE_CLERK_PUBLISHABLE_KEY}>
    <Root />
  </ClerkProvider>,
);