From 77cbfc53843bf802b72a6b77c51f7909b7bfc6e5 Mon Sep 17 00:00:00 2001
From: Jeff Jackson <jeffmjack@gmail.com>
Date: Tue, 2 Aug 2022 18:56:35 -0500
Subject: [PATCH] update App.js and package.json to react-router-dom v6.3.0

---
 react-query-demo/package.json |  4 +--
 react-query-demo/src/App.js   | 48 +++++++++++------------------------
 2 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/react-query-demo/package.json b/react-query-demo/package.json
index 8046e8d..42905e9 100644
--- a/react-query-demo/package.json
+++ b/react-query-demo/package.json
@@ -11,7 +11,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-query": "^3.19.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
@@ -40,4 +40,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/react-query-demo/src/App.js b/react-query-demo/src/App.js
index 549e9af..9483377 100644
--- a/react-query-demo/src/App.js
+++ b/react-query-demo/src/App.js
@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
 import { QueryClientProvider, QueryClient } from 'react-query'
 import { ReactQueryDevtools } from 'react-query/devtools'
 import './App.css'
@@ -17,7 +17,7 @@ const queryClient = new QueryClient()
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <Router>
+      <BrowserRouter>
         <div>
           <nav>
             <ul>
@@ -32,39 +32,21 @@ function App() {
               </li>
             </ul>
           </nav>
-          <Switch>
-            <Route path='/super-heroes'>
-              <SuperHeroesPage />
-            </Route>
-            <Route path='/rq-super-heroes/:heroId'>
-              <RQSuperHeroPage />
-            </Route>
-            <Route path='/rq-super-heroes'>
-              <RQSuperHeroesPage />
-            </Route>
-            <Route path='/rq-parallel'>
-              <ParallelQueriesPage />
-            </Route>
-            <Route path='/rq-dynamic-parallel'>
-              <DynamicParallelPage heroIds={[1, 3]} />
-            </Route>
-            <Route path='/rq-dependent'>
-              <DependentQueriesPage email='vishwas@example.com' />
-            </Route>
-            <Route path='/rq-paginated'>
-              <PaginatedQueriesPage />
-            </Route>
-            <Route path='/rq-infinite'>
-              <InfiniteQueriesPage />
-            </Route>
-            <Route path='/'>
-              <HomePage />
-            </Route>
-          </Switch>
+          <Routes>
+            <Route path='/super-heroes' element={< SuperHeroesPage />} />
+            <Route path='/rq-super-heroes/:heroId' element={<RQSuperHeroPage />} />
+            <Route path='/rq-super-heroes' element={<RQSuperHeroesPage />} />
+            <Route path='/rq-parallel' element={<ParallelQueriesPage />} />
+            <Route path='/rq-dynamic-parallel' element={<DynamicParallelPage heroIds={[1, 3]} />} />
+            <Route path='/rq-dependent' element={<DependentQueriesPage email='vishwas@example.com' />} />
+            <Route path='/rq-paginated' element={<PaginatedQueriesPage />} />
+            <Route path='/rq-infinite' element={<InfiniteQueriesPage />} />
+            <Route path='/' element={<HomePage />} />
+          </Routes>
         </div>
-      </Router>
+      </BrowserRouter>
       <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
-    </QueryClientProvider>
+    </QueryClientProvider >
   )
 }