Create a router for each story render

Author: sandhose

frontend/stories/routes/app.tsx

@@ -1,25 +1,30 @@
-import { QueryClientProvider } from "@tanstack/react-query";
-import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  RouterProvider,
+  createHashHistory,
+  createRouter,
+} from "@tanstack/react-router";
 import { TooltipProvider } from "@vector-im/compound-web";
 import i18n from "i18next";
 import { I18nextProvider } from "react-i18next";
-import { queryClient } from "../../src/graphql";
-import { router } from "../../src/router";
+import { routeTree } from "../../src/routeTree.gen";
 
 export const App: React.FC<{ route: string }> = ({ route }) => {
-  const history = createMemoryHistory({
-    initialEntries: [route],
+  const queryClient = new QueryClient();
+  const history = createHashHistory();
+  history.replace(route);
+
+  const router = createRouter({
+    routeTree,
+    context: { queryClient },
+    history,
   });
 
   return (
     <QueryClientProvider client={queryClient}>
       <TooltipProvider>
         <I18nextProvider i18n={i18n}>
-          <RouterProvider
-            router={router}
-            history={history}
-            context={{ queryClient }}
-          />
+          <RouterProvider router={router} />
         </I18nextProvider>
       </TooltipProvider>
     </QueryClientProvider>