@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,
+});