switch to jsx routing

Author: professoralex13

examples/playground/src/Root.tsx

@@ -1,8 +1,11 @@
 import MainWindow from "./MainWindow"
 import SideBar from "./components/SideBar"
-import { Outlet } from "react-router-dom"
+import { Outlet, Route, Routes } from "react-router-dom"
 import useUserUpdater from "./hooks/useUserUpdater"
 import useAppConfigLoader from "./hooks/useAppConfigLoader"
+import App from "./pages/App"
+import Auth from "./pages/Auth"
+import Tiles from "./pages/Tiles"
 
 function Root() {
   useAppConfigLoader();
@@ -11,6 +14,11 @@ function Root() {
   return (
     <main className='flex flex-row h-screen'>
       <SideBar />
+      <Routes>
+        <Route path="/app" element={<App />} />
+        <Route path="/auth" element={<Auth />} />
+        <Route path="/tiles" element={<Tiles />} />
+      </Routes>
       <Outlet />
       <MainWindow />
     </main>

examples/playground/src/main.tsx

@@ -2,33 +2,20 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import Root from './Root.tsx'
 import './index.css'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import App from './pages/App.tsx'
+import { BrowserRouter } from 'react-router-dom'
 import { RecoilRoot } from 'recoil'
-import Auth from './pages/Auth.tsx'
-import Tiles from './pages/Tiles.tsx'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <Root />,
-    children: [{
-      path: 'app',
-      element: <App />
-    }, {
-      path: 'auth',
-      element: <Auth />
-    }, {
-      path: 'tiles',
-      element: <Tiles />
-    }]
-  }
-])
+const client = new QueryClient();
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <RecoilRoot>
-      <RouterProvider router={router} />
-    </RecoilRoot>
+    <QueryClientProvider client={client}>
+      <RecoilRoot>
+        <BrowserRouter>
+          <Root />
+        </BrowserRouter>
+      </RecoilRoot>
+    </QueryClientProvider>
   </StrictMode>,
 )