From 104ed70668ab67b658915dd808c6d0cfb6523cf0 Mon Sep 17 00:00:00 2001
From: Sheharyar Ahmad Khan <53520808+Sheharyark@users.noreply.github.com>
Date: Fri, 5 Aug 2022 14:35:04 +0530
Subject: [PATCH] Update App.js: React Router Dom new Version

Here,
#I changer the routes according to the new version of react router dom
in react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
import { Switch, Route } from "react-router-dom";
to

import { Routes ,Route } from 'react-router-dom';
You also need to update the Route declaration from

<Route path="/" component={Home} />
to

<Route path='/welcome' element={<Home/>} />
In react-router-dom, you also do not need to use the exact in the Route declaration.
---
 src/App.js | 34 +++++++++-------------------------
 1 file changed, 9 insertions(+), 25 deletions(-)

diff --git a/src/App.js b/src/App.js
index 981c5aa51..d7203d7a3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import "./App.css";
 import Header from "./Header";
 import Home from "./Home";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Checkout from "./Checkout";
 import Login from "./Login";
 import Payment from "./Payment";
@@ -43,31 +43,15 @@ function App() {
   }, []);
 
   return (
-    <Router>
+     <Router>
       <div className="app">
-        <Switch>
-          <Route path="/orders">
-            <Header />
-            <Orders />
-          </Route>
-          <Route path="/login">
-            <Login />
-          </Route>
-          <Route path="/checkout">
-            <Header />
-            <Checkout />
-          </Route>
-          <Route path="/payment">
-            <Header />
-            <Elements stripe={promise}>
-              <Payment />
-            </Elements>
-          </Route>
-          <Route path="/">
-            <Header />
-            <Home />
-          </Route>
-        </Switch>
+        <Routes>
+          <Route path='/login' element={<Login />} />
+          <Route path='/' element={[<Header />, <Home />]} />
+          <Route path='/checkout' element={[<Header />, <Checkout />]} />
+         <Route path='/payment' element={[<Header />, <Elements stripe={Promise} />],<Payment/>} />
+         <Route path='/' element={[<Header />, <Home/>} />
+        </Routes>
       </div>
     </Router>
   );