firstRoute

package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1"
+    "react-icons": "^4.10.1",
+    "react-router-dom": "^6.15.0",
+    "sweetalert": "^2.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.tsx

@@ -1,22 +1,19 @@
 import React from "react";
+import { AiFillStar, AiOutlineStar, AiOutlineShoppingCart } from "react-icons/ai";
+
+import Headers from "./components/Headers";
 import "./App.css";
-import { AiFillStar, AiOutlineStar } from "react-icons/ai";
+import { useRoutes } from "react-router-dom";
+import routes from "./routes";
 function App() {
+
+  const router = useRoutes(routes);
+
   return (
     // <ContextDataProvider>
     <div className="app">
-      <header>
-        <a className="logo" href="#">
-          shop cart
-        </a>
-        <a href="#">
-          {/* <AiOutlineShoppingCart className="shop-icon" /> */}
-          <span>2</span>
-        </a>
-      </header>
-
       {/* Start Content */}
-
+      <Headers />
       <section>
         <p className="title">All Products:</p>
       </section>

src/components/Headers.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { AiOutlineShoppingCart } from 'react-icons/ai'
+
+const Headers = () => {
+  return (
+    <header>
+      <a className="logo" href="#">
+        shop cart
+      </a>
+      <a href="#">
+        <AiOutlineShoppingCart className="shop-icon" />
+        <span>2</span>
+      </a>
+    </header>
+  )
+}
+
+export default Headers

src/routes.tsx

@@ -0,0 +1,9 @@
+import App from "./App";
+import Cart from "./Pages/Cart";
+
+const routes = [
+    { path: "/", element: <App /> },
+    { path: "/cart", element: <Cart /> }
+];
+
+export default routes;