T
TanStack•17mo ago
foreign-sapphire

Setting up a keylogging component to navigate to specific section of site

Hi I have a component which checks for our university's student identifier format which can come in from a barcode scanner we have and if one is detected I'd like to redirect the client to a page to sign them in. This is my current code https://gist.github.com/Gobot1234/e6178026a3f21fcf4eb3e8812c9d719c current I get a warning with the component Warning: useRouter must be used inside a <RouterProvider> component! this is how I mount everything 
function InnerApp() {
  const auth = useAuth();
  return <RouterProvider router={router} context={{ auth }} />;
}

const rootElement = document.getElementById("root");

if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <HelmetProvider>
          <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
            <Provider store={store}>
              <PersistGate loading={<Loading />} persistor={persistor}>
                <AuthProvider>
                  <InnerApp />
                  <Toaster />
                  <UCardReader />
                </AuthProvider>
              </PersistGate>
            </Provider>
          </ThemeProvider>
        </HelmetProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </React.StrictMode>,
  );
} else {
  console.error("Root element not found");
}
function InnerApp() {
  const auth = useAuth();
  return <RouterProvider router={router} context={{ auth }} />;
}

const rootElement = document.getElementById("root");

if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <HelmetProvider>
          <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
            <Provider store={store}>
              <PersistGate loading={<Loading />} persistor={persistor}>
                <AuthProvider>
                  <InnerApp />
                  <Toaster />
                  <UCardReader />
                </AuthProvider>
              </PersistGate>
            </Provider>
          </ThemeProvider>
        </HelmetProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </React.StrictMode>,
  );
} else {
  console.error("Root element not found");
}
how should I go about getting rid of the warning? I tried just moving UCardReader to be a child of RouterProvider but that didn't seem to do anything
Gist
index.tsx
GitHub Gist: instantly share code, notes, and snippets.
1 Reply
foreign-sapphire
foreign-sapphireOP•17mo ago
actually figured it out, should have gone where in the RootComponent file

Did you find this page helpful?