@tanstack/router WIP

package.json

@@ -26,6 +26,8 @@
     "@hookform/resolvers": "^3.1.1",
     "@neodrag/react": "^2.0.3",
     "@tanstack/react-query": "^4.29.14",
+    "@tanstack/router": "0.0.1-beta.86",
+    "@tanstack/router-devtools": "0.0.1-beta.86",
     "@types/deep-equal": "^1.0.1",
     "@zxch3n/tidy": "github:hackworthltd/tidy#e07fdef2ae7bf593701817113dd47b4cd56c7a97",
     "axios": "^1.4.0",
@@ -36,7 +38,6 @@
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.3",
-    "react-router-dom": "^6.13.0",
     "reactflow": "^11.7.2",
     "universal-cookie": "^4.0.4",
     "uuid": "^9.0.0",

src/App.tsx

@@ -1,13 +1,13 @@
 import { useEffect } from "react";
-import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { RouterProvider } from "@tanstack/router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { CookiesProvider, useCookies } from "react-cookie";
 import { CookieSetOptions } from "universal-cookie";
 import { v4 as uuidv4 } from "uuid";
 
 import "@/index.css";
 
-import { ChooseSession, Edit, NoMatch } from "@/components";
+import { router } from "@/router";
 
 const queryClient = new QueryClient();
 
@@ -37,18 +37,9 @@ const App = (): JSX.Element => {
 
   return (
     <CookiesProvider>
-      <BrowserRouter>
-        <QueryClientProvider client={queryClient}>
-          <Routes>
-            <Route path="/" element={<Navigate to="/sessions" />} />
-            <Route path="/sessions">
-              <Route index element={<ChooseSession />} />
-              <Route path=":sessionId" element={<Edit />} />
-            </Route>
-            <Route path="*" element={<NoMatch />} />
-          </Routes>
-        </QueryClientProvider>
-      </BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
     </CookiesProvider>
   );
 };

src/components/ChooseSession/index.tsx

@@ -15,10 +15,14 @@ import {
   getGetSessionListQueryKey,
   useDeleteSession,
 } from "@/primer-api";
-import { useNavigate } from "react-router-dom";
+import { AnyRoute, useNavigate } from "@tanstack/router";
 import { useQueryClient } from "@tanstack/react-query";
 
-const ChooseSession = (): JSX.Element => {
+export interface ChooseSessionProps {
+  route: AnyRoute;
+}
+
+const ChooseSession = (p: ChooseSessionProps): JSX.Element => {
   const [cookies] = useCookies(["id"]);
 
   // NOTE: pagination in our API is 1-indexed.
@@ -67,10 +71,14 @@ const ChooseSession = (): JSX.Element => {
     setPage(meta.lastPage);
   }
 
-  const navigate = useNavigate();
+  const navigate = useNavigate({ from: p.route.id });
   const newSession = useCreateSession({
     mutation: {
-      onSuccess: (newSessionID: Uuid) => navigate(`/sessions/${newSessionID}`),
+      onSuccess: (newSessionId: Uuid) =>
+        navigate({
+          to: "/sessions/$sessionId",
+          params: { sessionId: newSessionId },
+        }),
     },
   });
 

src/components/Edit/index.tsx

@@ -21,7 +21,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useParams } from "react-router-dom";
+import { AnyRoute, useParams } from "@tanstack/router";
 import { ReactFlowProvider } from "reactflow";
 import {
   useGetAvailableActions,
@@ -54,13 +54,17 @@ import {
 // hardcoded values (for now)
 const initialLevel: Level = "Expert";
 
-const Edit = (): JSX.Element => {
-  const params = useParams();
-  const sessionId = params["sessionId"];
+export interface EditProps {
+  route: AnyRoute;
+}
 
+const Edit = (p: EditProps): JSX.Element => {
+  const { sessionId } = useParams({ from: p.route.id });
   if (!sessionId) {
     return (
-      <Error string={"No sessionId parameter: " + JSON.stringify(params)} />
+      <Error
+        string={"No sessionId parameter: " + JSON.stringify(p.route.path)}
+      />
     );
   }
   // This hook is *technically* conditional.

src/components/SessionPreview/index.tsx

@@ -1,8 +1,7 @@
 import "@/index.css";
 
 import { StarIcon, TrashIcon, UserPlusIcon } from "@heroicons/react/24/outline";
-
-import { Link } from "react-router-dom";
+import { Link } from "@tanstack/router";
 
 import { SessionMeta } from "@/Types";
 import { BinaryTreePlaceholder } from "@/components";
@@ -21,8 +20,8 @@ export const SessionPreview = ({
     <div className="flex flex-col divide-y divide-grey-quaternary rounded-lg bg-white-primary text-center drop-shadow-md">
       <div className="flex flex-1 flex-col">
         <Link
-          to={`/sessions/${session.id}`}
-          key={session.id}
+          to="/sessions/$sessionId"
+          params={{ sessionId: session.id }}
           className="group rounded-t-lg hover:text-blue-primary"
         >
           <BinaryTreePlaceholder className="mx-auto h-16 w-16 shrink-0 fill-current text-white-primary group-hover:text-blue-primary md:h-48 md:w-48" />

src/router.tsx

@@ -0,0 +1,30 @@
+import { Outlet, RootRoute, Router } from "@tanstack/router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+
+import { indexRoute } from "@/routes";
+import { sessionsRoute } from "@/routes/sessions";
+import { sessionIdRoute } from "@/routes/sessions/sessionId";
+import { catchAllRoute } from "@/routes/catchAll";
+
+export const rootRoute = new RootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  sessionsRoute.addChildren([sessionIdRoute]),
+  catchAllRoute,
+]);
+
+export const router = new Router({ routeTree });
+
+declare module "@tanstack/router" {
+  interface Register {
+    router: typeof router;
+  }
+}

src/routes/catchAll/index.ts

@@ -0,0 +1,9 @@
+import { Route } from "@tanstack/router";
+import { rootRoute } from "@/router";
+import { NoMatch } from "@/components";
+
+export const catchAllRoute = new Route({
+  getParentRoute: () => rootRoute,
+  path: "*",
+  component: NoMatch,
+});

src/routes/index.tsx

@@ -0,0 +1,11 @@
+import { Navigate, Route } from "@tanstack/router";
+
+import { rootRoute } from "@/router";
+
+const Root = (): JSX.Element => <Navigate from="/" to="/sessions" />;
+
+export const indexRoute = new Route({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: Root,
+});

src/routes/sessions/index.tsx

@@ -0,0 +1,12 @@
+import { Route } from "@tanstack/router";
+
+import { rootRoute } from "@/router";
+import { ChooseSession } from "@/components";
+
+const SessionsRoute = (): JSX.Element => <ChooseSession route={sessionsRoute} />;
+
+export const sessionsRoute = new Route({
+  getParentRoute: () => rootRoute,
+  path: "sessions",
+  component: SessionsRoute,
+});

src/routes/sessions/sessionId/index.tsx

@@ -0,0 +1,12 @@
+import { Route } from "@tanstack/router";
+
+import { sessionsRoute } from "@/routes/sessions";
+import { Edit } from "@/components";
+
+const SessionIdRoute = (): JSX.Element => <Edit route={sessionIdRoute} />;
+
+export const sessionIdRoute = new Route({
+  getParentRoute: () => sessionsRoute,
+  path: "$sessionId",
+  component: SessionIdRoute,
+});