404 page added

frontend/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter as Router, Route } from 'react-router-dom'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import { Container } from 'react-bootstrap'
 import Header from './components/Header'
 import Footer from './components/Footer'
@@ -27,49 +27,53 @@ import CarouselListScreen from './screens/CarouselListScreen'
 import CarouselEditScreen from './screens/CarouselEditScreen'
 import CreateCarouselScreen from './screens/CreateCarouselScreen'
 import { CategoryListScreen } from './screens/CategoryListScreen'
+import Error404Screen from './screens/Error404Screen'
 
 function App() {
   return (
     <Router>
       <Header />
       <main className="py-3">
         <Container>
-          <Route path="/" component={HomeScreen} exact />
-          <Route path="/search/:keyword" component={SearchScreen} />
-          <Route path="/cart/:id?" component={CartScreen}></Route>
-          <Route path="/login" component={LoginScreen}></Route>
-          <Route path="/profile" component={ProfileScreen}></Route>
-          <Route path="/register" component={RegisterScreen}></Route>
-          <Route
-            path="/forgotpassword/:email?"
-            component={ForgotPasswordScreen}
-          ></Route>
-          <Route
-            path="/resetpassword/:token"
-            component={ResetPasswordScreen}
-          ></Route>
-          <Route path="/shipping" component={ShippingScreen}></Route>
-          <Route path="/payment" component={PaymentScreen}></Route>
-          <Route path="/placeorder" component={PlaceOrderScreen}></Route>
-          <Route path="/order/:id" component={OrderScreen}></Route>
-          <Route path="/categories/:category" component={CategoryScreen} />
-          <Route path="/product/:id" component={ProductScreen} />
-          <Route path="/admin/users" component={UsersListScreen} />
-          <Route path="/admin/user/:id" component={UserEditScreen} />
-          <Route path="/admin/productlist" component={ProductListScreen} />
-          <Route path="/admin/createproduct" component={CreateProductScreen} />
-          <Route path="/admin/product/:id/edit" component={ProductEditScreen} />
-          <Route path="/admin/orderlist" component={OrderListScreen} />
-          <Route path="/admin/carousellist" component={CarouselListScreen} />
-          <Route
-            path="/admin/createcarousel"
-            component={CreateCarouselScreen}
-          />
-          <Route
-            path="/admin/carousel/:id/edit"
-            component={CarouselEditScreen}
-          />
-          <Route path="/admin/categorylist" component={CategoryListScreen} />
+          <Switch>
+            <Route path="/" component={HomeScreen} exact />
+            <Route path="/search/:keyword" component={SearchScreen} />
+            <Route path="/cart/:id?" component={CartScreen}></Route>
+            <Route path="/login" component={LoginScreen}></Route>
+            <Route path="/profile" component={ProfileScreen}></Route>
+            <Route path="/register" component={RegisterScreen}></Route>
+            <Route
+              path="/forgotpassword/:email?"
+              component={ForgotPasswordScreen}
+            ></Route>
+            <Route
+              path="/resetpassword/:token"
+              component={ResetPasswordScreen}
+            ></Route>
+            <Route path="/shipping" component={ShippingScreen}></Route>
+            <Route path="/payment" component={PaymentScreen}></Route>
+            <Route path="/placeorder" component={PlaceOrderScreen}></Route>
+            <Route path="/order/:id" component={OrderScreen}></Route>
+            <Route path="/categories/:category" component={CategoryScreen} />
+            <Route path="/product/:id" component={ProductScreen} />
+            <Route path="/admin/users" component={UsersListScreen} />
+            <Route path="/admin/user/:id" component={UserEditScreen} />
+            <Route path="/admin/productlist" component={ProductListScreen} />
+            <Route path="/admin/createproduct" component={CreateProductScreen} />
+            <Route path="/admin/product/:id/edit" component={ProductEditScreen} />
+            <Route path="/admin/orderlist" component={OrderListScreen} />
+            <Route path="/admin/carousellist" component={CarouselListScreen} />
+            <Route
+              path="/admin/createcarousel"
+              component={CreateCarouselScreen}
+            />
+            <Route
+              path="/admin/carousel/:id/edit"
+              component={CarouselEditScreen}
+            />
+            <Route path="/admin/categorylist" component={CategoryListScreen} />
+            <Route path="*" component={Error404Screen} />
+          </Switch>
         </Container>
       </main>
       <Footer />

frontend/src/screens/Error404Screen.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import {Row,Col,Button} from 'react-bootstrap'
+import { LinkContainer } from 'react-router-bootstrap'
+
+function Error404Screen() {
+  return (
+    <>
+    <br />
+      <center className='mt-5 '>
+        <Row className='g-0 d-flex align-items-center'>
+          <Col xs={5} md={6}>
+            <div className="text-dark display-1 float-end">404</div> 
+          </Col>
+          <Col xs={7} md={6}>
+              <p className="text-dark float-start pt-2 pt-md-3"><b>Page not found</b></p>
+          </Col>
+        </Row>
+        <LinkContainer to="/">
+          <Button className='mt-1 px-5'>
+            Take me home
+          </Button>
+        </LinkContainer>
+      </center>
+    </>
+  )
+}
+
+export default Error404Screen