From 74ed9a3ddc0a0678c6ae1c05a3171ba84688175d Mon Sep 17 00:00:00 2001
From: Alican Erdurmaz <alicanerdurmaz@gmail.com>
Date: Thu, 2 Jan 2025 10:05:49 +0300
Subject: [PATCH] feat(docs): upgrade live-preview examples to react router v7
 (#6621)

---
 .../forms/custom-form-validation.md           | 52 ++++++++++++-------
 .../_basic-usage-live-preview.md              | 12 ++++-
 .../_filtering-live-preview.md                | 12 ++++-
 .../_sorting-live-preview.md                  | 12 ++++-
 .../use-list/_basic-usage-live-preview.md     | 12 ++++-
 .../hooks/use-list/_filtering-live-preview.md | 12 ++++-
 .../use-list/_pagination-live-preview.md      | 12 ++++-
 .../hooks/use-list/_sorting-live-preview.md   | 12 ++++-
 .../use-many/_basic-usage-live-preview.md     | 14 +++--
 .../use-one/_basic-usage-live-preview.md      | 12 ++++-
 .../use-select/_basic-usage-live-preview.md   | 20 ++++---
 .../use-select/_default-value-live-preview.md | 22 +++++---
 .../use-select/_on-search-live-preview.md     | 20 ++++---
 .../hooks/use-select/_sort-live-preview.md    | 20 ++++---
 .../use-show/_basic-usage-live-preview.md     | 17 ++++--
 .../_partial-basic-usage-live-preview.md      | 12 ++++-
 .../_partial-filtering-live-preview.md        | 12 ++++-
 .../_partial-pagination-live-preview.md       | 12 ++++-
 .../_partial-relational-data-live-preview.md  | 10 +++-
 .../_partial-sorting-live-preview.md          | 12 ++++-
 .../docs/data/packages/supabase/index.md      | 30 +++++++----
 21 files changed, 264 insertions(+), 85 deletions(-)

diff --git a/documentation/docs/advanced-tutorials/forms/custom-form-validation.md b/documentation/docs/advanced-tutorials/forms/custom-form-validation.md
index afa86aa784c8..10784e8c72cd 100644
--- a/documentation/docs/advanced-tutorials/forms/custom-form-validation.md
+++ b/documentation/docs/advanced-tutorials/forms/custom-form-validation.md
@@ -40,6 +40,8 @@ Now let's prepare a rule that checks if the titles of the posts are unique. We h
 ```
 
 ```tsx live hideCode url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { useForm, Create, CreateButton } from "@refinedev/antd";
 import { Form, Input } from "antd";
@@ -61,10 +63,14 @@ interface PostUniqueCheckRequestQuery {
 // highlight-end
 
 const PostCreate: React.FC = () => {
-  const { formProps, saveButtonProps } = useForm<IPost>();
+  const { formProps, saveButtonProps } = useForm<IPost>({
+    defaultFormValues: {
+      title: "Test",
+    },
+  });
 
   // highlight-next-line
-  const [title, setTitle] = useState("");
+  const [title, setTitle] = useState("Test");
 
   // highlight-start
   const apiUrl = useApiUrl();
@@ -100,7 +106,8 @@ const PostCreate: React.FC = () => {
             },
             {
               validator: async (_, value) => {
-                if (!value) return;
+                if (!value)
+                  return Promise.reject(new Error("Please enter a title"));
                 const { data } = await refetch();
                 if (data && data.data.isAvailable) {
                   return Promise.resolve();
@@ -124,21 +131,30 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <CreateButton />
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/data/hooks/use-infinite-list/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-infinite-list/_basic-usage-live-preview.md
index 44deafb27c59..cd3e93f38546 100644
--- a/documentation/docs/data/hooks/use-infinite-list/_basic-usage-live-preview.md
+++ b/documentation/docs/data/hooks/use-infinite-list/_basic-usage-live-preview.md
@@ -55,10 +55,18 @@ setRefineProps({
   resources: [
     {
       name: "posts",
-      list: PostList,
+      list: "/posts",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-infinite-list/_filtering-live-preview.md b/documentation/docs/data/hooks/use-infinite-list/_filtering-live-preview.md
index 6bf5673ef316..0cfb20b27f3a 100644
--- a/documentation/docs/data/hooks/use-infinite-list/_filtering-live-preview.md
+++ b/documentation/docs/data/hooks/use-infinite-list/_filtering-live-preview.md
@@ -88,10 +88,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-infinite-list/_sorting-live-preview.md b/documentation/docs/data/hooks/use-infinite-list/_sorting-live-preview.md
index 0a20b7aa8f60..90b41f739131 100644
--- a/documentation/docs/data/hooks/use-infinite-list/_sorting-live-preview.md
+++ b/documentation/docs/data/hooks/use-infinite-list/_sorting-live-preview.md
@@ -83,10 +83,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-list/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-list/_basic-usage-live-preview.md
index 11d9d9b5f593..a03ba9348486 100644
--- a/documentation/docs/data/hooks/use-list/_basic-usage-live-preview.md
+++ b/documentation/docs/data/hooks/use-list/_basic-usage-live-preview.md
@@ -51,10 +51,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-list/_filtering-live-preview.md b/documentation/docs/data/hooks/use-list/_filtering-live-preview.md
index 25a432bf90f9..f9eedc82007e 100644
--- a/documentation/docs/data/hooks/use-list/_filtering-live-preview.md
+++ b/documentation/docs/data/hooks/use-list/_filtering-live-preview.md
@@ -77,10 +77,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-list/_pagination-live-preview.md b/documentation/docs/data/hooks/use-list/_pagination-live-preview.md
index 75cd9d8ba8ad..6f16bc3c09b2 100644
--- a/documentation/docs/data/hooks/use-list/_pagination-live-preview.md
+++ b/documentation/docs/data/hooks/use-list/_pagination-live-preview.md
@@ -81,10 +81,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-list/_sorting-live-preview.md b/documentation/docs/data/hooks/use-list/_sorting-live-preview.md
index 963a8cc1ea72..40f1c8f3fd22 100644
--- a/documentation/docs/data/hooks/use-list/_sorting-live-preview.md
+++ b/documentation/docs/data/hooks/use-list/_sorting-live-preview.md
@@ -73,10 +73,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-many/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-many/_basic-usage-live-preview.md
index 6c1bafdc658c..0bdf52f24c64 100644
--- a/documentation/docs/data/hooks/use-many/_basic-usage-live-preview.md
+++ b/documentation/docs/data/hooks/use-many/_basic-usage-live-preview.md
@@ -54,7 +54,7 @@ const ProductList: React.FC = () => {
 
       <button
         onClick={() => {
-          setIds((prev) => [...prev, Math.floor(Math.random() * 1000) + 1]);
+          setIds((prev) => [...prev, Math.floor(Math.random() * 150) + 1]);
         }}
       >
         Add new product
@@ -68,9 +68,17 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-one/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-one/_basic-usage-live-preview.md
index 4f1e651d9934..eebdf1a85b19 100644
--- a/documentation/docs/data/hooks/use-one/_basic-usage-live-preview.md
+++ b/documentation/docs/data/hooks/use-one/_basic-usage-live-preview.md
@@ -59,9 +59,17 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-select/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-select/_basic-usage-live-preview.md
index 400a9e39df4d..d80358669864 100644
--- a/documentation/docs/data/hooks/use-select/_basic-usage-live-preview.md
+++ b/documentation/docs/data/hooks/use-select/_basic-usage-live-preview.md
@@ -1,5 +1,5 @@
-```tsx live url=http://localhost:3000/products previewHeight=200px
-setInitialRoutes(["/posts/create"]);
+```tsx live url=http://localhost:3000/categories previewHeight=200px
+setInitialRoutes(["/categories"]);
 // visible-block-start
 import { useSelect } from "@refinedev/core";
 
@@ -8,7 +8,7 @@ interface ICategory {
   title: string;
 }
 
-const ProductCreate: React.FC = () => {
+const Categpries: React.FC = () => {
   const { options } = useSelect<ICategory>({
     resource: "categories",
   });
@@ -30,10 +30,18 @@ const ProductCreate: React.FC = () => {
 setRefineProps({
   resources: [
     {
-      name: "posts",
-      create: ProductCreate,
+      name: "categories",
+      list: "/categories",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<Categpries />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-select/_default-value-live-preview.md b/documentation/docs/data/hooks/use-select/_default-value-live-preview.md
index b97ce18fffea..714829526308 100644
--- a/documentation/docs/data/hooks/use-select/_default-value-live-preview.md
+++ b/documentation/docs/data/hooks/use-select/_default-value-live-preview.md
@@ -1,5 +1,5 @@
-```tsx live url=http://localhost:3000/products previewHeight=200px hideCode
-setInitialRoutes(["/posts/create"]);
+```tsx live url=http://localhost:3000/categories previewHeight=200px hideCode
+setInitialRoutes(["/categories"]);
 // visible-block-start
 import { useSelect } from "@refinedev/core";
 
@@ -8,11 +8,11 @@ interface ICategory {
   title: string;
 }
 
-const ProductCreate: React.FC = () => {
+const Categories: React.FC = () => {
   const { options } = useSelect<ICategory>({
     resource: "categories",
     // highlight-next-line
-    defaultValue: 20,
+    defaultValue: 3,
   });
 
   return (
@@ -32,10 +32,18 @@ const ProductCreate: React.FC = () => {
 setRefineProps({
   resources: [
     {
-      name: "posts",
-      create: ProductCreate,
+      name: "categories",
+      list: "/categories",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<Categories />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-select/_on-search-live-preview.md b/documentation/docs/data/hooks/use-select/_on-search-live-preview.md
index 4836a18470f7..f693cbf6f8c6 100644
--- a/documentation/docs/data/hooks/use-select/_on-search-live-preview.md
+++ b/documentation/docs/data/hooks/use-select/_on-search-live-preview.md
@@ -1,5 +1,5 @@
-```tsx live url=http://localhost:3000/products previewHeight=200px hideCode
-setInitialRoutes(["/posts/create"]);
+```tsx live url=http://localhost:3000/categories previewHeight=200px hideCode
+setInitialRoutes(["/categories"]);
 // visible-block-start
 import { useSelect } from "@refinedev/core";
 
@@ -8,7 +8,7 @@ interface ICategory {
   title: string;
 }
 
-const ProductCreate: React.FC = () => {
+const Categories: React.FC = () => {
   const { options, onSearch } = useSelect<ICategory>({
     resource: "categories",
     // highlight-start
@@ -43,10 +43,18 @@ const ProductCreate: React.FC = () => {
 setRefineProps({
   resources: [
     {
-      name: "posts",
-      create: ProductCreate,
+      name: "categories",
+      list: "/categories",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<Categories />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-select/_sort-live-preview.md b/documentation/docs/data/hooks/use-select/_sort-live-preview.md
index 974f075e1d42..54db3ccbf059 100644
--- a/documentation/docs/data/hooks/use-select/_sort-live-preview.md
+++ b/documentation/docs/data/hooks/use-select/_sort-live-preview.md
@@ -1,5 +1,5 @@
-```tsx live url=http://localhost:3000/products previewHeight=200px hideCode
-setInitialRoutes(["/posts/create"]);
+```tsx live url=http://localhost:3000/categories previewHeight=200px hideCode
+setInitialRoutes(["/categories"]);
 // visible-block-start
 import { useSelect } from "@refinedev/core";
 
@@ -8,7 +8,7 @@ interface ICategory {
   title: string;
 }
 
-const ProductCreate: React.FC = () => {
+const Categories: React.FC = () => {
   const [order, setOrder] = React.useState<"asc" | "desc">("asc");
   const { options } = useSelect<ICategory>({
     resource: "categories",
@@ -44,10 +44,18 @@ const ProductCreate: React.FC = () => {
 setRefineProps({
   resources: [
     {
-      name: "posts",
-      create: ProductCreate,
+      name: "categories",
+      list: "/categories",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<Categories />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-show/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-show/_basic-usage-live-preview.md
index 674cab544090..f0a2b29a5d50 100644
--- a/documentation/docs/data/hooks/use-show/_basic-usage-live-preview.md
+++ b/documentation/docs/data/hooks/use-show/_basic-usage-live-preview.md
@@ -6,7 +6,7 @@ body {
 ```
 
 ```tsx live url=http://localhost:3000/products/show/1 previewHeight=300px
-setInitialRoutes(["/products/show/1"]);
+setInitialRoutes(["/products/show/123"]);
 // visible-block-start
 import { useShow } from "@refinedev/core";
 
@@ -46,9 +46,20 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      show: ProductShow,
+      show: "/products/show/:id",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/products/show/:id"
+          element={<ProductShow />}
+        />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-table/_partial-basic-usage-live-preview.md b/documentation/docs/data/hooks/use-table/_partial-basic-usage-live-preview.md
index 2912ab5b6a8f..139026feb25b 100644
--- a/documentation/docs/data/hooks/use-table/_partial-basic-usage-live-preview.md
+++ b/documentation/docs/data/hooks/use-table/_partial-basic-usage-live-preview.md
@@ -60,10 +60,18 @@ setRefineProps({
   resources: [
     {
       name: "posts",
-      list: PostList,
+      list: "/posts",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-table/_partial-filtering-live-preview.md b/documentation/docs/data/hooks/use-table/_partial-filtering-live-preview.md
index fdaa283fa5c5..0982bc77fe6e 100644
--- a/documentation/docs/data/hooks/use-table/_partial-filtering-live-preview.md
+++ b/documentation/docs/data/hooks/use-table/_partial-filtering-live-preview.md
@@ -140,10 +140,18 @@ setRefineProps({
   resources: [
     {
       name: "posts",
-      list: PostList,
+      list: "/posts",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-table/_partial-pagination-live-preview.md b/documentation/docs/data/hooks/use-table/_partial-pagination-live-preview.md
index a34eb3f0a232..24f8f96395ae 100644
--- a/documentation/docs/data/hooks/use-table/_partial-pagination-live-preview.md
+++ b/documentation/docs/data/hooks/use-table/_partial-pagination-live-preview.md
@@ -133,10 +133,18 @@ setRefineProps({
   resources: [
     {
       name: "posts",
-      list: PostList,
+      list: "/posts",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-table/_partial-relational-data-live-preview.md b/documentation/docs/data/hooks/use-table/_partial-relational-data-live-preview.md
index 54310a7c2511..70aa51b8a807 100644
--- a/documentation/docs/data/hooks/use-table/_partial-relational-data-live-preview.md
+++ b/documentation/docs/data/hooks/use-table/_partial-relational-data-live-preview.md
@@ -110,5 +110,13 @@ setRefineProps({
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-table/_partial-sorting-live-preview.md b/documentation/docs/data/hooks/use-table/_partial-sorting-live-preview.md
index 4634ac825592..6798bd426753 100644
--- a/documentation/docs/data/hooks/use-table/_partial-sorting-live-preview.md
+++ b/documentation/docs/data/hooks/use-table/_partial-sorting-live-preview.md
@@ -114,10 +114,18 @@ setRefineProps({
   resources: [
     {
       name: "posts",
-      list: PostList,
+      list: "/posts",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/packages/supabase/index.md b/documentation/docs/data/packages/supabase/index.md
index b3f5cb1b9f42..022b9fe8bf98 100644
--- a/documentation/docs/data/packages/supabase/index.md
+++ b/documentation/docs/data/packages/supabase/index.md
@@ -1146,7 +1146,9 @@ Sign in the app with followings credentials:
 
 We have successfully logged in to the app. After then `ListPage` and `CreatePage` pages created. When the `Create` button is clicked, the `CreatePage` component will render.
 
-```tsx live previewOnly url=http://localhost:5173/posts
+```tsx live previewOnly url=http://localhost:5173/posts previewHeight=460px
+setInitialRoutes(["/posts/create"]);
+
 interface ICategory {
   id: number;
   title: string;
@@ -1282,16 +1284,22 @@ const PostList: React.FC = () => {
 };
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```