switched 15 and 21 to React Router 6

john-smilga · Mar 27, 2022 · 731d90d · 731d90d
1 parent dec6796
commit 731d90d
Show file tree

Hide file tree

Showing 9 changed files with 34,674 additions and 264 deletions.
diff --git a/15-cocktails/final/README.md b/15-cocktails/final/README.md
@@ -9,3 +9,7 @@
 "build": "CI= react-scripts build",
 
 ```
+
+```sh
+npm install react-router-dom@6
+```
diff --git a/15-cocktails/final/package-lock.json b/15-cocktails/final/package-lock.json
diff --git a/15-cocktails/final/package.json b/15-cocktails/final/package.json
@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "3.4.3"
   },
   "scripts": {

diff --git a/15-cocktails/final/src/App.js b/15-cocktails/final/src/App.js
@@ -1,30 +1,22 @@
-import React from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 // import pages
-import Home from "./pages/Home";
-import About from "./pages/About";
-import SingleCocktail from "./pages/SingleCocktail";
-import Error from "./pages/Error";
+import Home from './pages/Home';
+import About from './pages/About';
+import SingleCocktail from './pages/SingleCocktail';
+import Error from './pages/Error';
 // import components
-import Navbar from "./components/Navbar";
+import Navbar from './components/Navbar';
 function App() {
   return (
     <Router>
       <Navbar />
-      <Switch>
-        <Route exact path="/">
-          <Home />
-        </Route>
-        <Route path="/about">
-          <About />
-        </Route>
-        <Route path="/cocktail/:id">
-          <SingleCocktail />
-        </Route>
-        <Route path="*">
-          <Error />
-        </Route>
-      </Switch>
+      <Routes>
+        <Route path='/' element={<Home />} />
+        <Route path='about' element={<About />} />
+        <Route path='cocktail/:id' element={<SingleCocktail />} />
+        <Route path='*' element={<Error />} />
+      </Routes>
     </Router>
   );
 }

diff --git a/15-cocktails/setup/README.md b/15-cocktails/setup/README.md
@@ -9,3 +9,7 @@
 "build": "CI= react-scripts build",
 
 ```
+
+```sh
+npm install react-router-dom@6
+```