Upgrade from react-router-dom v5 to v6 🚀

package.json

@@ -1,51 +1,51 @@
 {
-  "name": "store",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@formspree/react": "^2.2.4",
-    "@stripe/react-stripe-js": "^1.1.2",
-    "@stripe/stripe-js": "^1.11.0",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.1.2",
-    "@testing-library/user-event": "^12.2.2",
-    "axios": "^0.21.1",
-    "country-state-city": "^3.0.1",
-    "dotenv": "^8.2.0",
-    "firebase": "^9.6.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-icons": "^3.11.0",
-    "react-image-magnify": "^2.7.4",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.0",
-    "react-toastify": "^8.1.0",
-    "stripe": "^8.130.0",
-    "styled-components": "^5.2.1",
-    "web-vitals": "^0.2.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "CI= react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
+    "name": "store",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@formspree/react": "^2.4.0",
+        "@stripe/react-stripe-js": "^1.12.0",
+        "@stripe/stripe-js": "^1.38.1",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^14.4.3",
+        "axios": "^0.27.2",
+        "country-state-city": "^3.1.2",
+        "dotenv": "^16.0.3",
+        "firebase": "^9.10.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.4.0",
+        "react-image-magnify": "^2.7.4",
+        "react-router-dom": "^6.4.1",
+        "react-scripts": "^5.0.1",
+        "react-toastify": "^9.0.8",
+        "stripe": "^10.12.0",
+        "styled-components": "^5.3.6",
+        "web-vitals": "^3.0.2"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "CI= react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
+}

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Navbar, Sidebar, Footer, Toast, ErrorBoundary } from './components';
 import { useProductsContext } from './context/products_context';
 import 'react-toastify/dist/ReactToastify.css';
@@ -19,6 +19,7 @@ import {
   PrivateRoute,
   ProfilePage,
 } from './pages';
+import PrivateRoute2 from './pages/PrivateRoute/index2';
 
 function App() {
   const { isSidebarOpen } = useProductsContext();
@@ -32,45 +33,28 @@ function App() {
         <Navbar />
         <Sidebar />
         <ErrorBoundary>
-          <Switch>
-            <Route exact path='/'>
-              <Home />
-            </Route>
-            <Route exact path='/about'>
-              <About />
-            </Route>
-            <Route exact path='/products'>
-              <Products />
-            </Route>
-            <Route exact path='/cart'>
-              <Cart />
+          <Routes>
+            <Route exact path='/' element={<Home />} />
+            <Route exact path='/about' element={<About />} />
+            <Route exact path='/products' element={<Products />} />
+            <Route exact path='/cart' element={<Cart />} />
+
+            <Route element={<PrivateRoute />}>
+              <Route element={<Login />} path='/login' />
+              <Route element={<Register />} path='/register' />
+              <Route element={<Forgot />} path='/forgot-password' />
+              <Route element={<Reset />} path='/reset-password' />
             </Route>
-            <PrivateRoute exact path='/login'>
-              <Login />
-            </PrivateRoute>
-            <PrivateRoute exact path='/register'>
-              <Register />
-            </PrivateRoute>
-            <PrivateRoute exact path='/forgot-password'>
-              <Forgot />
-            </PrivateRoute>
-            <PrivateRoute exact path='/reset-password'>
-              <Reset />
-            </PrivateRoute>
-            <Route exact path='/products/:id' children={<SingleProduct />} />
-            <PrivateRoute exact path='/checkout'>
-              <Checkout />
-            </PrivateRoute>
-            <PrivateRoute exact path='/orders'>
-              <OrdersPage />
-            </PrivateRoute>
-            <PrivateRoute exact path='/profile'>
-              <ProfilePage />
-            </PrivateRoute>
-            <Route exact path='*'>
-              <Error />
+
+            <Route element={<PrivateRoute2 />}>
+              <Route element={<Checkout />} path='/checkout' />
+              <Route element={<OrdersPage />} path='/orders' />
+              <Route element={<ProfilePage />} path='/profile' />
             </Route>
-          </Switch>
+
+            <Route exact path='/products/:id' element={<SingleProduct />} />
+            <Route exact path='*' element={<Error />} />
+          </Routes>
         </ErrorBoundary>
         <Footer />
       </Router>

src/components/StripeCheckout/index.js

@@ -12,7 +12,7 @@ import { useCartContext } from '../../context/cart_context';
 import { useUserContext } from '../../context/user_context';
 import { useOrderContext } from '../../context/order_context';
 import { formatPrice } from '../../utils/helpers';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { payment_url as url } from '../../utils/constants';
 
@@ -22,7 +22,7 @@ const CheckoutForm = () => {
   const { cart, total_amount, shipping_fee, clearCart } = useCartContext();
   const { shipping, placeOrder } = useOrderContext();
   const { currentUser } = useUserContext();
-  const history = useHistory();
+  const history = useNavigate();
 
   // STRIPE STUFF
   const [succeeded, setSucceeded] = useState(false);
@@ -93,7 +93,7 @@ const CheckoutForm = () => {
       await placeOrder();
       setTimeout(() => {
         clearCart();
-        history.push('/orders');
+        history('/orders');
       }, 5000);
     }
   };

src/pages/LoginPage/index.js

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import Wrapper from './styles';
 import { useUserContext } from '../../context/user_context';
-import { Link, useHistory, useLocation } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import useMounted from '../../hooks/useMounted';
 import { toast } from 'react-toastify';
 import { BsFillEyeFill, BsFillEyeSlashFill } from 'react-icons/bs';
 import Button from '../../components/Button';
 
 function LoginPage() {
-  const history = useHistory();
+  const history = useNavigate();
   const location = useLocation();
   const mounted = useMounted();
   const { loginUser, signInWithGoogle } = useUserContext();
@@ -31,14 +31,14 @@ function LoginPage() {
     setIsSubmitting(true);
     loginUser(email, password)
       .then((res) => {
-        history.push(location.state?.from ?? '/');
+        history(location.state?.from ?? '/');
       })
       .catch((err) => {
         toast.error(`Error: ${err.message}`);
       })
       .finally(() => mounted.current && setIsSubmitting(false));
   };
-  
+
   function togglePasswordVisibility() {
     setVisible(!visible);
   }
@@ -110,7 +110,7 @@ function LoginPage() {
             onClick={() => {
               signInWithGoogle()
                 .then((user) => {
-                  history.push('/');
+                  history('/');
                 })
                 .catch((err) => {
                   toast.error(`Error: ${err.message}`);

src/pages/PrivateRoute/index.js

@@ -1,33 +1,19 @@
 import React from 'react';
-import { Route, Redirect, useLocation } from 'react-router-dom';
+import { Outlet, Navigate, useLocation } from 'react-router-dom';
 import { useUserContext } from '../../context/user_context';
 
-const PrivateRoute = ({ children, ...rest }) => {
+const PrivateRoute = () => {
   const { currentUser } = useUserContext();
   const location = useLocation();
 
-  if (
-    rest.path === '/login' ||
-    rest.path === '/register' ||
-    rest.path === '/forgot-password' ||
-    rest.path === '/reset-password'
-  ) {
-    return currentUser ? (
-      <Redirect to={location.state?.from ?? '/'} />
-    ) : (
-      <Route {...rest}>{children}</Route>
-    );
-  }
-
   return currentUser ? (
-    <Route {...rest}>{children}</Route>
+    <Navigate replace to={location.state?.from ?? '/'} />
   ) : (
-    <Redirect
-      to={{
-        pathname: '/login',
-        state: { from: rest.path },
-      }}
-    />
+    <Outlet />
   );
+  // rest.path === '/login' ||
+  //   rest.path === '/register' ||
+  //   rest.path === '/forgot-password' ||
+  //   rest.path === '/reset-password';
 };
 export default PrivateRoute;

src/pages/PrivateRoute/index2.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Outlet, Navigate } from 'react-router-dom';
+import { useUserContext } from '../../context/user_context';
+
+const PrivateRoute2 = () => {
+  const { currentUser } = useUserContext();
+
+  return currentUser ? (
+    <Outlet />
+  ) : (
+    <Navigate
+      replace
+      to={{
+        pathname: '/login',
+        // state: { from: rest.path },
+      }}
+    />
+  );
+};
+export default PrivateRoute2;

src/pages/RegisterPage/index.js

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import Wrapper from './styles';
 import { useUserContext } from '../../context/user_context';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import useMounted from '../../hooks/useMounted';
 import { toast } from 'react-toastify';
 import { BsFillEyeFill, BsFillEyeSlashFill } from 'react-icons/bs';
 import Button from '../../components/Button';
 
 function RegisterPage() {
-  const history = useHistory();
+  const history = useNavigate();
   const mounted = useMounted();
   const { registerUser, signInWithGoogle } = useUserContext();
   const [email, setEmail] = useState('');
@@ -37,7 +37,7 @@ function RegisterPage() {
     setIsSubmitting(true);
     registerUser(email, password)
       .then((res) => {
-        history.push('/');
+        history('/');
       })
       .catch((err) => {
         toast.error(`Error: ${err.message}`);
@@ -138,7 +138,7 @@ function RegisterPage() {
             onClick={() => {
               signInWithGoogle()
                 .then((user) => {
-                  history.push('/');
+                  history('/');
                 })
                 .catch((err) => {
                   toast.error(`Error: ${err.message}`);

src/pages/ResetPasswordPage/index.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import Wrapper from './styles';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useUserContext } from '../../context/user_context';
 import useQuery from '../../hooks/useQuery';
 import { toast } from 'react-toastify';
 
 function ResetPasswordPage() {
-  const history = useHistory();
+  const history = useNavigate();
   const { resetPassword } = useUserContext();
   const query = useQuery();
   const [password, setPassword] = useState('');
@@ -21,13 +21,13 @@ function ResetPasswordPage() {
     }
 
     if (!oobCode) {
-      return history.push('/');
+      return history('/');
     }
 
     resetPassword(oobCode, password)
       .then((res) => {
         toast.success('Password changed successfully, login to continue');
-        history.push('/login');
+        history('/login');
       })
       .catch((err) => {
         toast.error(`Error: ${err.message}`);