⬆️ Upgrade to v6 react-router

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qp-hoard",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "homepage": "https://qp.pages.dev",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "^5.0.0",
     "react-swipeable-views": "^0.14.0",
     "web-vitals": "^1.1.1"

public/sw.js

@@ -1,5 +1,5 @@
-const staticCacheName = "site-static-v13";
-const dynamicCacheName = "site-dynamic-v13";
+const staticCacheName = "site-static-v13.1";
+const dynamicCacheName = "site-dynamic-v13.1";
 const assets = [
   "/",
   "/index.html",

src/App.js

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { createMuiTheme, ThemeProvider } from "@material-ui/core";
 import Container from "@material-ui/core/Container";
 import Home from "./router/Home";
@@ -69,17 +69,22 @@ function App() {
           <Navbar logo={logo} />
           <main>
             <Container fixed>
-              <Switch>
-                <Route exact path="/">
-                  <Home />
-                </Route>
-                <Route path="/bca">{data && <Render data={data.bca} />}</Route>
-                <Route path="/bcom">
-                  {data && <Render data={data.bcom} />}
-                </Route>
-                <Route path="/bba">{data && <Render data={data.bba} />}</Route>
-                <Route path="*" component={Error} />
-              </Switch>
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route
+                  path="/bca"
+                  element={data && <Render data={data.bca} />}
+                />
+                <Route
+                  path="/bcom"
+                  element={data && <Render data={data.bcom} />}
+                />
+                <Route
+                  path="/bba"
+                  element={data && <Render data={data.bba} />}
+                />
+                <Route path="*" element={<Error />} />
+              </Routes>
               <InstallPWA />
             </Container>
           </main>

src/components/BottomNav.js

@@ -5,7 +5,7 @@ import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
 import CodeIcon from "@material-ui/icons/Code";
 import TrendingUpIcon from "@material-ui/icons/TrendingUp";
 import AccountBalanceIcon from "@material-ui/icons/AccountBalance";
-import { useHistory, useLocation } from "react-router";
+import { useNavigate, useLocation } from "react-router";
 import { appContext } from "../App";
 const useStyles = makeStyles({
   botnav: {
@@ -18,7 +18,7 @@ const BottomNav = () => {
   const [value, setValue] = useState(null);
   const { logo, setLogo, darkMode } = useContext(appContext);
   const classes = useStyles();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const navTheme = useMemo(
     () =>
@@ -73,17 +73,17 @@ const BottomNav = () => {
         >
           <BottomNavigationAction
             label="BBA"
-            onClick={() => history.push("/bba")}
+            onClick={() => navigate("/bba")}
             icon={<TrendingUpIcon fontSize="small" />}
           ></BottomNavigationAction>
           <BottomNavigationAction
-            onClick={() => history.push("/bca")}
+            onClick={() => navigate("/bca")}
             label="BCA"
             icon={<CodeIcon fontSize="small" />}
           ></BottomNavigationAction>
           <BottomNavigationAction
             label="BCOM"
-            onClick={() => history.push("/bcom")}
+            onClick={() => navigate("/bcom")}
             icon={<AccountBalanceIcon fontSize="small" />}
           ></BottomNavigationAction>
         </BottomNavigation>