T
TanStack•2y ago
afraid-scarlet

Navigation bug when tabbing out of browser, maybe?

I am currently developing an app with Tanstack Router, and I love it! But I am encountering one problem. Whenever I move my browser out of focus (By clicking on another app on my pc), and then click on my browser again, I am not able to navigate to other pages? I can click my navigation buttons, and the URL in my browser changes, but the content of my app does not change to the new page? I am not getting any errors, or any other information, so I do not expect to get an answer. I am just curious if anyone has experienced this before?
5 Replies
quickest-silver
quickest-silver•2y ago
can you provide a minimal complete example?
afraid-scarlet
afraid-scarletOP•2y ago
Yes of course: This is the main.tsx file: 
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import { ThemeProvider } from "./components/providers/ThemeProvider/ThemeProvider";
import { Toaster } from "@/components/ui/toaster";

const router = createRouter({ routeTree });

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
      <RouterProvider router={router} />
      <Toaster />
    </ThemeProvider>
  </React.StrictMode>
);
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import { ThemeProvider } from "./components/providers/ThemeProvider/ThemeProvider";
import { Toaster } from "@/components/ui/toaster";

const router = createRouter({ routeTree });

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
      <RouterProvider router={router} />
      <Toaster />
    </ThemeProvider>
  </React.StrictMode>
);
And here is the root.tsx file (I have double underscore before root, but discord formats it wrong): 
import QueryProvider from "@/components/providers/QueryProvider/QueryProvider";
import { UserProvider } from "@/components/providers/UserProvider/UserProvider";
import { createRootRoute, Outlet } from "@tanstack/react-router";

export const Route = createRootRoute({
  component: () => (
    <>
      <QueryProvider>
        <UserProvider>
          <Outlet />
        </UserProvider>
      </QueryProvider>
    </>
  ),
});
import QueryProvider from "@/components/providers/QueryProvider/QueryProvider";
import { UserProvider } from "@/components/providers/UserProvider/UserProvider";
import { createRootRoute, Outlet } from "@tanstack/react-router";

export const Route = createRootRoute({
  component: () => (
    <>
      <QueryProvider>
        <UserProvider>
          <Outlet />
        </UserProvider>
      </QueryProvider>
    </>
  ),
});
I am suspecting that the problem may lie in the fact that my providers are located both in main.tsx, and in __root.tsx. But for some reason my app will not load if I put QuerProvider & UserProvider in main.tsx. Would it make a difference to move them to main.tsx?
quickest-silver
quickest-silver•2y ago
can you please make it runnable e.g. by forking one of the router examples on Stackblitz and modifying it? btw this sounds more like a react query issue here since it has the reload on window focus feature you could disable it and see if this problem is still occuring
quickest-silver
quickest-silver•2y ago
https://tanstack.com/query/latest/docs/framework/react/guides/window-focus-refetching
Window Focus Refetching | TanStack Query Docs
If a user leaves your application and returns and the query data is stale, TanStack Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus option: Disabling Globally
afraid-scarlet
afraid-scarletOP•2y ago
The React Query thing did not make a change, but thank you for the suggestion 😄 I am not able to recreate the problem on stackblitz for some reason. I have also tried building the app and running it, but that also has the same problem.

Did you find this page helpful?