Routing added for Home, Products and About

Featured Product, Product Listing and Product Detail functionality added
About us, Not Found page added

Author: WebDeveloperGuide

web_panel/package-lock.json

@@ -6,13 +6,17 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.1",
     "i": "^0.3.7",
     "npm": "^8.5.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "react-slick": "^0.28.1",
+    "react-toastify": "^8.2.0",
+    "redux": "^4.1.2",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.3",
     "web-vitals": "^2.1.4"

web_panel/package.json

@@ -1,9 +1,23 @@
 import Home from './pages/Home';
+import ProductsPage from './pages/ProductsPage';
+import ProductDetailPage from './pages/ProductDetailPage';
+import About from './pages/About';
+import NotFound from './pages/NotFound';
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
 
 function App() {
   return (
     <>
-      <Home/>
+      <Router>
+        <Switch>
+        	<Route path="/" component={Home} exact/>
+        	<Route path="/products" component={ProductsPage}/>
+        	<Route path="/product/:id" component={ProductDetailPage}/>
+          <Route path="/about" component={About}/>
+          <Route path="*" component={NotFound} />
+        </Switch>
+      </Router>  
     </>
   );
 }