update

src/Utils/Index.js

@@ -82,7 +82,7 @@ const footerStyle = {
     padding: "20px",
     left: "0",
     bottom: "0",
-    height: "60px",
+    height: "80px",
     width: "100%"
   };
   

src/container/Screen404.js

+import React from 'react'
+import {
+  useLocation
+} from "react-router-dom";
+
+export default function NoMatch() {
+  let location = useLocation();
+
+  return (
+    <div>
+      <h3>
+        Link '<code>{location.pathname}</code>' engga ada euy
+      </h3>
+    </div>
+  );
+}
\ No newline at end of file

src/router/homeRoutes.js

+import screen404 from '../container/Screen404'
+import Beranda from '../container/Beranda'
+
+const routes = [
+    {
+      path: "/beranda",
+      main: Beranda
+    },
+    {
+      path: "/screen404",
+      main: screen404
+    },
+  ];
+
+export default routes;
\ No newline at end of file

src/router/index.js

@@ -4,13 +4,13 @@ import {
   Switch,
   Route,
   Link,
-  useLocation
+  useLocation,
+  Redirect
 } from "react-router-dom";
 import Home from '../container/Home'
 import Login from '../container/Login'
 import Register from '../container/Register'
-import Profile from '../container/Profile'
-import Beranda from "../container/Beranda";
+import Screen404 from '../container/Screen404'
 // This site has 3 pages, all of which are rendered
 // dynamically in the browser (not server rendered).
 //
@@ -23,64 +23,22 @@ import Beranda from "../container/Beranda";
 export default function BasicExample() {
   return (
     <Router>
-      {/* <div>
-        <ul>
-          <li>
-            <Link to="/">Home</Link>
-          </li>
-          <li>
-            <Link to="/about">About</Link>
-          </li>
-          <li>
-            <Link to="/dashboard">Dashboard</Link>
-          </li>
-        </ul>
-
-        <hr /> */}
-
-      {/*
-          A <Switch> looks through all its children <Route>
-          elements and renders the first one whose path
-          matches the current URL. Use a <Switch> any time
-          you have multiple routes, but you want only one
-          of them to render at a time
-        */}
       <Switch>
-        <Route exact path="/" exact component={Login} />
-        {/* <Route path="*">
-          <NoMatch />
-        </Route> */}
-        <Route path="/register" exact component={Register}/>
-
-        <Home>
-          <Route path="/home" exact component={Beranda} />
-          <Route path="/profile" exact component={Profile} />
-        </Home>
+        <Route exact path="/">
+          <Redirect
+            to={{
+              pathname: "/home",
+              // state: { from: location }
+            }}
+          />
+        </Route>
+        <Route path="/login" component={Login} />
+        <Route path="/register" component={Register}/>
+        <Route path="/home" component={Home} />
+        <Route path="*">
+          <Screen404 />
+        </Route>
       </Switch>
-      {/* </div> */}
     </Router>
   );
-}
-
-// You can think of these components as "pages"
-// in your app.
-
-// function Home() {
-//   return (
-//     <div>
-//       <h2>Home</h2>
-//     </div>
-//   );
-// }
-
-function NoMatch() {
-  let location = useLocation();
-
-  return (
-    <div>
-      <h3>
-        Link '<code>{location.pathname}</code>' engga ada euy
-      </h3>
-    </div>
-  );
 }
\ No newline at end of file