refinedev · Sri-Akshat5 · Aug 5, 2025 · Sep 2, 2025 · Sep 2, 2025
@@ -0,0 +1,93 @@
+# Refine with TanStack Router Example
+
+This example demonstrates how to use **Refine** with **TanStack Router** for modern, type-safe routing.
+
+## About
+
+This project showcases the integration between Refine and TanStack Router, highlighting:
+
+- Type-safe routing with TanStack Router
+- Built-in data fetching and caching
+- Advanced search parameter handling
+- Modern routing patterns with Refine
+
+## Features
+
+- ✅ **Type Safety**: Full TypeScript support with route-level type safety
+- ✅ **Performance**: Optimized routing with built-in caching and preloading
+- ✅ **Modern DX**: Advanced developer experience with TanStack Router's tooling
+- ✅ **Search Params**: Advanced search parameter management with validation
+- ✅ **Data Fetching**: Integrated data loading with automatic caching
+
+## Getting Started
+
+1. Install dependencies:
+
+```bash
+npm install
+```
+
+2. Start the development server:
+
+```bash
+npm run dev
+```
+
+3. Open your browser and navigate to `http://localhost:5173`
+
+## Project Structure
+
+```
+src/
+├── components/
+│   └── posts/
+│       ├── list.tsx      # Posts list component
+│       ├── create.tsx    # Post creation component
+│       ├── edit.tsx      # Post editing component
+│       └── show.tsx      # Post detail component
+├── routes/
+│   ├── __root.tsx        # Root route component
+│   ├── index.tsx         # Home page route
+│   └── posts/
+│       ├── index.tsx     # Posts list route
+│       ├── create.tsx    # Post creation route
+│       ├── $id.edit.tsx  # Post editing route
+│       └── $id.show.tsx  # Post detail route
+├── App.tsx               # Main application component
+└── main.tsx              # Application entry point
+```
+
+## Key Concepts
+
+### Router Configuration
+
+The router is configured using TanStack Router's file-based routing system. Each route file automatically generates the appropriate route configuration.
+
+### Refine Integration
+
+Refine is configured to use the TanStack Router bindings:
+
+```tsx
+import { Refine } from "@refinedev/core";
+import routerBindings from "@refinedev/tanstack-router";
+
+<Refine
+  routerProvider={routerBindings}
+  // ... other props
+/>;
+```
+
+### Type Safety
+
+TanStack Router provides full type safety for routes and parameters:
+
+```tsx
+// Automatically typed based on route definition
+const { id } = useParams({ from: "/posts/$id/edit" });
+```
+
+## Learn More
+
+- [Refine Documentation](https://refine.dev/docs)
+- [TanStack Router Documentation](https://tanstack.com/router)
+- [Refine TanStack Router Integration](https://refine.dev/docs/router-integrations/tanstack-router)
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Refine with TanStack Router</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,27 @@
+{
+  "name": "refine-tanstack-router-example",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Example Refine application using TanStack Router",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@refinedev/core": "^4.57.10",
+    "@refinedev/simple-rest": "^5.0.8",
+    "@refinedev/tanstack-router": "workspace:*",
+    "@tanstack/react-router": "^1.87.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@tanstack/router-cli": "^1.87.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.4.2",
+    "vite": "^5.4.15"
+  }
+}
@@ -0,0 +1,78 @@
+import React from "react";
+import { Refine } from "@refinedev/core";
+import dataProvider from "@refinedev/simple-rest";
+import routerBindings from "@refinedev/tanstack-router";
+import {
+  createRouter,
+  createRootRoute,
+  createRoute,
+  RouterProvider,
+} from "@tanstack/react-router";
+
+// Root route
+const rootRoute = createRootRoute({
+  component: () => <div>Root Layout</div>,
+});
+
+// Home route
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: () => <div>Welcome to Refine with TanStack Router!</div>,
+});
+
+// Posts routes
+const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/posts",
+  component: () => <PostsList />,
+});
+
+const postCreateRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/posts/create",
+  component: () => <div>Create Post</div>,
+});
+
+// Route tree
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  postsRoute,
+  postCreateRoute,
+]);
+
+// Router instance
+const router = createRouter({ routeTree });
+
+// Simple Posts List component
+function PostsList() {
+  return (
+    <div>
+      <h1>Posts</h1>
+      <p>This is where the posts list would be displayed.</p>
+      <a href="/posts/create">Create New Post</a>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <RouterProvider router={router}>
+      <Refine
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        routerProvider={routerBindings}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+            create: "/posts/create",
+            edit: "/posts/edit/:id",
+            show: "/posts/show/:id",
+          },
+        ]}
+      />
+    </RouterProvider>
+  );
+}
+
+export default App;
@@ -0,0 +1,8 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+root.render(<App />);