refactor(examples): Update react-router example to match the last API…

… (6.4.0) (#4174)
TanStack · Sep 17, 2022 · 6393259 · 6393259
1 parent 9511933
commit 6393259
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 91 deletions.
diff --git a/examples/react/react-router/package.json b/examples/react/react-router/package.json
@@ -13,7 +13,7 @@
     "match-sorter": "^6.3.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-router-dom": "^6.4.0-pre.13",
+    "react-router-dom": "^6.4.0",
     "rooks": "^6.4.3",
     "sort-by": "^1.2.0",
     "@tanstack/react-query": "4.3.4",

diff --git a/examples/react/react-router/src/index.jsx b/examples/react/react-router/src/index.jsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
-import { DataBrowserRouter, Route } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
@@ -27,38 +27,46 @@ const queryClient = new QueryClient({
   },
 });
 
+const router = createBrowserRouter([
+    {
+      path: "/",
+      element: <Root />,
+      errorElement: <ErrorPage />,
+      loader: rootLoader(queryClient),
+      action: rootAction(queryClient),
+      children: [
+        {
+          index: true,
+          element: <Index />
+        },
+        {
+          path: "contacts/:contactId",
+          element: <Contact />,
+          loader: contactLoader(queryClient),
+          action: contactAction(queryClient),
+        },
+        {
+          path: "contacts/:contactId/edit",
+          element: <EditContact />,
+          loader: contactLoader(queryClient),
+          action: editAction(queryClient),
+        },
+        {
+          path: "contacts/:contactId/destroy",
+          element: <EditContact />,
+          action: destroyAction(queryClient),
+          errorElement: <div>Oops! There was an error.</div>
+        },
+      ],
+    },
+  ],
+);
+
 const rootElement = document.getElementById("root");
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <DataBrowserRouter>
-        <Route
-          path="/"
-          element={<Root />}
-          errorElement={<ErrorPage />}
-          loader={rootLoader(queryClient)}
-          action={rootAction(queryClient)}
-        >
-          <Route index element={<Index />} />
-          <Route
-            path="contacts/:contactId"
-            element={<Contact />}
-            loader={contactLoader(queryClient)}
-            action={contactAction(queryClient)}
-          />
-          <Route
-            path="contacts/:contactId/edit"
-            element={<EditContact />}
-            loader={contactLoader(queryClient)}
-            action={editAction(queryClient)}
-          />
-          <Route
-            path="contacts/:contactId/destroy"
-            action={destroyAction(queryClient)}
-            errorElement={<div>Oops! There was an error.</div>}
-          />
-        </Route>
-      </DataBrowserRouter>
+      <RouterProvider router={router} />
       <ReactQueryDevtools position="bottom-right" />
     </QueryClientProvider>
   </React.StrictMode>