fix: fix client side navigation (#173)

* fix: fix client side navigation

* refactor: move ui-kit client side routing provider to main.tsx

Author: kantord

src/lib/ui-kit-client-side-routing.tsx

@@ -0,0 +1,12 @@
+import { useNavigate } from "react-router-dom";
+import { RouterProvider } from "@stacklok/ui-kit";
+
+export function UiKitClientSideRoutingProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const navigate = useNavigate();
+
+  return <RouterProvider navigate={navigate}>{children}</RouterProvider>;
+}

src/main.tsx

@@ -10,6 +10,7 @@ import { DarkModeProvider, Toaster } from "@stacklok/ui-kit";
 import { client } from "./api/generated/index.ts";
 import { QueryClientProvider } from "./components/react-query-provider.tsx";
 import { BrowserRouter } from "react-router-dom";
+import { UiKitClientSideRoutingProvider } from "./lib/ui-kit-client-side-routing.tsx";
 
 // Initialize the API client
 client.setConfig({
@@ -19,16 +20,18 @@ client.setConfig({
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
-      <DarkModeProvider>
-        <SidebarProvider>
-          <QueryClientProvider>
-            <ErrorBoundary fallback={<Error />}>
-              <Toaster />
-              <App />
-            </ErrorBoundary>
-          </QueryClientProvider>
-        </SidebarProvider>
-      </DarkModeProvider>
+      <UiKitClientSideRoutingProvider>
+        <DarkModeProvider>
+          <SidebarProvider>
+            <QueryClientProvider>
+              <ErrorBoundary fallback={<Error />}>
+                <Toaster />
+                <App />
+              </ErrorBoundary>
+            </QueryClientProvider>
+          </SidebarProvider>
+        </DarkModeProvider>
+      </UiKitClientSideRoutingProvider>
     </BrowserRouter>
   </StrictMode>,
 );