How to use 'useNavigate' in the root component App

[yefu24324]

https://stackblitz.com/edit/solidjs-templates-t5zefbwm?file=src%2FApp.tsx

I have a validation service outside the component that navigates and redirects when it encounters a 401 error. However, I cannot access it outside the component.

import { AuthContextProvider } from "./contexts/auth/auth.context";

const App = () => {
  const navigate = useNavigate(); // ← Error: <A> and 'use' router primitives can be only used inside a Route.
  const service = new LocalAuthService(navigate);

  return (
    <div class="bg-background relative flex min-h-svh flex-col">
      <ThemeProvider>
        <AuthContextProvider instance={service}>
          <I18nProvider loadResources={(locale) => import(`./assets/locales/${locale}.ts`).then((res) => res.default)}>
            <SidebarProvider>
              <UserProvider>
                <Router>{routes}</Router>
              </UserProvider>
            </SidebarProvider>
          </I18nProvider>
        </AuthContextProvider>
      </ThemeProvider>
    </div>
  );
};