ronit-mukherjee · Legacyhub · May 18, 2020
diff --git a/public/bootstrap.min.css b/public/bootstrap.min.css
diff --git a/public/bootstrap.min.js b/public/bootstrap.min.js
diff --git a/public/index.html b/public/index.html
@@ -9,16 +9,14 @@
       content="Learn how to use React in a different way then it's generally used"
     />
     <meta name="author" content="Ronit Mukherjee<connect.ronit@gmail.com>" />
-    <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
-      crossorigin="anonymous"
-    />
-    <title>React Ref Used Differently | By Ronit Mukherjee</title>
+    <link rel="stylesheet" href="bootstrap.min.css" />
+    <title>React Router Tutorial | By Ronit Mukherjee</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script src="jquery-3.5.1.slim.min.js"></script>
+    <script src="popper.min.js"></script>
+    <script src="bootstrap.min.js"></script>
   </body>
 </html>
diff --git a/public/jquery-3.5.1.slim.min.js b/public/jquery-3.5.1.slim.min.js
diff --git a/public/popper.min.js b/public/popper.min.js
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,20 @@
 import React from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+
+import Header from "./Components/Header/Header";
+import Footer from "./Components/Footer/Footer";
+import Routes from "./Routes";
 
 function App() {
-  return <h1>App Loaded</h1>;
+  return (
+    <Router>
+      <Header />
+      <div className="container mt-5">
+        <Routes />
+      </div>
+      <Footer />
+    </Router>
+  );
 }
 
 export default App;
diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Footer = () => {
+  return (
+    <div className="fixed-bottom">
+      <ul className="nav">
+        <li className="nav-item">
+          <Link className="nav-link" to="/">
+            Home
+          </Link>
+        </li>
+        <li className="nav-item">
+          <Link className="nav-link" to="/about">
+            About
+          </Link>
+        </li>
+        <li className="nav-item">
+          <Link className="nav-link" to="/services">
+            Services
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Header = () => {
+  return (
+    <nav className="navbar navbar-expand-lg navbar-light bg-light">
+      <Link className="navbar-brand" to="/">
+        Navbar
+      </Link>
+      <button
+        className="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarNav"
+        aria-controls="navbarNav"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span className="navbar-toggler-icon"></span>
+      </button>
+      <div className="collapse navbar-collapse" id="navbarNav">
+        <ul className="navbar-nav">
+          <li className="nav-item active">
+            <Link className="nav-link" to="/">
+              Home
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link className="nav-link" to="/about">
+              About
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link className="nav-link" to="/services">
+              Services
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+};
+
+export default Header;
diff --git a/src/Pages/About/About.jsx b/src/Pages/About/About.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const About = () => {
+  return <div>ABOUT</div>;
+};
+
+export default About;
diff --git a/src/Pages/Home/Home.jsx b/src/Pages/Home/Home.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Home = () => {
+  return <div>HOME</div>;
+};
+
+export default Home;
diff --git a/src/Pages/Services/Services.jsx b/src/Pages/Services/Services.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Services = () => {
+  return <div>Services</div>;
+};
+
+export default Services;
diff --git a/src/Routes.jsx b/src/Routes.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import Home from "./Pages/Home/Home";
+import About from "./Pages/About/About";
+import Services from "./Pages/Services/Services";
+
+const Routes = () => {
+  return (
+    <Switch>
+      <Route path="/" exact component={Home} />
+      <Route path="/about" component={About} />
+      <Route path="/services" component={Services} />
+    </Switch>
+  );
+};
+
+export default Routes;