chore: add TanStack Router changeset and lint fixes

yf-hk · yf-hk · commit 3940c88a89dc · 2026-04-15T01:22:49.000+08:00
diff --git a/.changeset/twelve-pandas-tanstack-router.md b/.changeset/twelve-pandas-tanstack-router.md
@@ -0,0 +1,9 @@
+---
+"@refinedev/tanstack-router": minor
+---
+
+feat: add TanStack Router integration. Related https://github.com/refinedev/refine/pull/6919
+
+Added a new `@refinedev/tanstack-router` package with Refine router-provider support for TanStack Router, including route-aware helpers such as `NavigateToResource`, `CatchAllNavigate`, `DocumentTitleHandler`, and `UnsavedChangesNotifier`.
+
+Also added TanStack Router documentation and routing guide examples, plus routing tutorial pages for the TanStack Router flow.
diff --git a/documentation/docs/guides-concepts/routing/tanstack-router/resource-and-routes-usage.tsx b/documentation/docs/guides-concepts/routing/tanstack-router/resource-and-routes-usage.tsx
@@ -213,4 +213,3 @@ export const ProductShow: React.FC = () => {
   );
 };
 `.trim();
-
diff --git a/documentation/docs/guides-concepts/routing/tanstack-router/use-form-usage.tsx b/documentation/docs/guides-concepts/routing/tanstack-router/use-form-usage.tsx
@@ -202,4 +202,3 @@ export const ProductEdit: React.FC = () => {
   );
 };
 `.trim();
-
diff --git a/documentation/docs/guides-concepts/routing/tanstack-router/use-modal-form-usage.tsx b/documentation/docs/guides-concepts/routing/tanstack-router/use-modal-form-usage.tsx
@@ -228,4 +228,3 @@ export const ProductList: React.FC = () => {
   );
 };
 `.trim();
-
diff --git a/documentation/docs/guides-concepts/routing/tanstack-router/use-table-usage.tsx b/documentation/docs/guides-concepts/routing/tanstack-router/use-table-usage.tsx
@@ -242,4 +242,3 @@ export const ProductList: React.FC = ({ tableProps }) => {
   );
 };
 `.trim();
-
diff --git a/documentation/tutorial/routing/authentication/tanstack-router/sandpack.tsx b/documentation/tutorial/routing/authentication/tanstack-router/sandpack.tsx
@@ -130,4 +130,3 @@ export const finalFiles = {
     active: true,
   },
 };
-
diff --git a/documentation/tutorial/routing/inferring-parameters/tanstack-router/sandpack.tsx b/documentation/tutorial/routing/inferring-parameters/tanstack-router/sandpack.tsx
@@ -386,4 +386,3 @@ export const finalFiles = {
     active: true,
   },
 };
-
diff --git a/documentation/tutorial/routing/intro/tanstack-router/sandpack.tsx b/documentation/tutorial/routing/intro/tanstack-router/sandpack.tsx
@@ -115,4 +115,3 @@ export const finalFiles = {
     active: true,
   },
 };
-
diff --git a/documentation/tutorial/routing/navigation/tanstack-router/sandpack.tsx b/documentation/tutorial/routing/navigation/tanstack-router/sandpack.tsx
@@ -234,4 +234,3 @@ export const finalFiles = {
     code: HeaderWithLinks,
   },
 };
-
diff --git a/documentation/tutorial/routing/redirects/tanstack-router/sandpack.tsx b/documentation/tutorial/routing/redirects/tanstack-router/sandpack.tsx
@@ -298,4 +298,3 @@ export const finalFiles = {
     active: true,
   },
 };
-
diff --git a/documentation/tutorial/routing/resource-definition/tanstack-router/sandpack.tsx b/documentation/tutorial/routing/resource-definition/tanstack-router/sandpack.tsx
@@ -290,4 +290,3 @@ export const finalFiles = {
     active: true,
   },
 };
-
diff --git a/documentation/tutorial/routing/syncing-state/tanstack-router/sandpack.tsx b/documentation/tutorial/routing/syncing-state/tanstack-router/sandpack.tsx
@@ -194,4 +194,3 @@ export const finalFiles = {
     active: true,
   },
 };
-
diff --git a/packages/tanstack-router/src/bindings.tsx b/packages/tanstack-router/src/bindings.tsx
@@ -26,8 +26,11 @@ export const stringifyConfig = {
 
 export const routerProvider: RouterProvider = {
   go: () => {
-    const { pathname, search: existingSearch, hash: existingHash } =
-      useLocation();
+    const {
+      pathname,
+      search: existingSearch,
+      hash: existingHash,
+    } = useLocation();
     const navigate = useNavigate();
     const router = useRouter();
 
@@ -44,11 +47,7 @@ export const routerProvider: RouterProvider = {
           ...query,
         };
 
-        const normalizedHash = (
-          hash ??
-          (keepHash ? existingHash : "") ??
-          ""
-        )
+        const normalizedHash = (hash ?? (keepHash ? existingHash : "") ?? "")
           .replace(/^#/, "")
           .trim();
 
@@ -109,12 +108,12 @@ export const routerProvider: RouterProvider = {
         pathname,
         params: {
           ...combinedParams,
-          currentPage: convertToNumberIfPossible(
-            combinedParams.currentPage,
-          ) as number | undefined,
-          pageSize: convertToNumberIfPossible(
-            combinedParams.pageSize,
-          ) as number | undefined,
+          currentPage: convertToNumberIfPossible(combinedParams.currentPage) as
+            | number
+            | undefined,
+          pageSize: convertToNumberIfPossible(combinedParams.pageSize) as
+            | number
+            | undefined,
           to: combinedParams.to as string | undefined,
         },
       };
diff --git a/packages/tanstack-router/src/catch-all-navigate.test.tsx b/packages/tanstack-router/src/catch-all-navigate.test.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { CatchAllNavigate } from "./catch-all-navigate";
+import { render, TestWrapper } from "./test/index";
+
+vi.mock("@tanstack/react-router", async () => {
+  const actual = await vi.importActual("@tanstack/react-router");
+
+  return {
+    ...actual,
+    Navigate: ({
+      to,
+      search,
+    }: {
+      to: string;
+      search?: Record<string, string>;
+    }) => (
+      <div
+        data-testid="navigate-to"
+        data-search={search ? JSON.stringify(search) : ""}
+      >
+        {to}
+      </div>
+    ),
+  };
+});
+
+describe("CatchAllNavigate", () => {
+  it("should not append the to query for the root path", () => {
+    render(<CatchAllNavigate to="/login" />, {
+      wrapper: TestWrapper({
+        routerInitialEntries: ["/"],
+      }),
+    });
+
+    expect(screen.getByTestId("navigate-to")).toHaveTextContent("/login");
+    expect(screen.getByTestId("navigate-to")).toHaveAttribute(
+      "data-search",
+      "",
+    );
+  });
+
+  it("should append the current path and search for non-root routes", () => {
+    render(<CatchAllNavigate to="/login" />, {
+      wrapper: TestWrapper({
+        routerInitialEntries: ["/posts?currentPage=2"],
+      }),
+    });
+
+    expect(screen.getByTestId("navigate-to")).toHaveTextContent("/login");
+    expect(screen.getByTestId("navigate-to")).toHaveAttribute(
+      "data-search",
+      JSON.stringify({ to: "/posts?currentPage=2" }),
+    );
+  });
+});
diff --git a/packages/tanstack-router/src/catch-all-navigate.tsx b/packages/tanstack-router/src/catch-all-navigate.tsx
@@ -7,6 +7,7 @@ import { Navigate, useLocation } from "@tanstack/react-router";
 export const CatchAllNavigate: React.FC<{ to: string }> = ({ to }) => {
   const location = useLocation();
   const queryValue = location.href.split("#")[0];
+  const search = queryValue.length > 1 ? { to: queryValue } : undefined;
 
-  return <Navigate to={to as never} search={{ to: queryValue }} />;
+  return <Navigate to={to as never} search={search as never} />;
 };
diff --git a/packages/tanstack-router/src/document-title-handler.tsx b/packages/tanstack-router/src/document-title-handler.tsx
@@ -61,7 +61,19 @@ export function DocumentTitleHandler({ handler }: Props) {
     } else {
       document.title = autoGeneratedTitle;
     }
-  }, [action, getUserFriendlyName, handler, id, location.href, params, pathname, populatedLabel, resource, resourceName, translate]);
+  }, [
+    action,
+    getUserFriendlyName,
+    handler,
+    id,
+    location.href,
+    params,
+    pathname,
+    populatedLabel,
+    resource,
+    resourceName,
+    translate,
+  ]);
 
   return <></>;
 }
diff --git a/packages/tanstack-router/src/test/index.tsx b/packages/tanstack-router/src/test/index.tsx
@@ -109,9 +109,7 @@ export const TestWrapper: (
       defaultPreload: false,
     });
 
-    return (
-      <TanStackRouterProvider router={router} />
-    );
+    return <TanStackRouterProvider router={router} />;
   };
 };
 

-Original file line number
+Diff line change
   );
 };
 `.trim();
+-