Warning: useRouter must be used inside a <RouterProvider> component! Error Component Stack

[imSamiul]

I am creating an authenticated route using the TanStack Router documentation. According to the docs, I need to create an inner component like this:

function InnerApp() {
  const auth = useAuth();
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} context={{ auth }} />
    </QueryClientProvider>
  );
}

Next, I need to pass this inner component inside the <AuthProvider> as follows:

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  );
}

Currently, I am using useRouter() inside the AuthProvider like this:

const router = useRouter();
const login = (token: string) => {
  Cookies.set("token", token, { expires: 7 });
  
  setIsAuthenticated(true);
  router.invalidate();
};

However, useRouter() is showing a warning in the Chrome console: "Warning: useRouter must be used inside a component! Error Component Stack."

How can I remove this warning, or how can I resolve this issue?

[schiller-manuel]

you currently have a circular dependency. to break it up, use the router not via the hook, but directly as returned from createRouter

[imSamiul]

I'm sorry for not getting back to you sooner. How can I do that (directly access the returned value of createRouter) without using useRouter() hook? Is there any code example?

[schiller-manuel]

just import the router returned from createRouter (if in another file) and directly reference it

[schiller-manuel]

you could also look into using Wrap and InnerWrap (router option)