made the route for the pages, navbar and footer of the application

src/App.js

@@ -1,28 +1,25 @@
 import { Component } from "react";
+import Footer from "./shared-components/footer-component/Footer";
+import Navbar from "./shared-components/navbar-component/Navbar";
+import { BrowserRouter, Route } from "react-router-dom";
+import HomePage from "./homePage/homePage";
+import ListingsPage from "./listings-page/listings-page";
+import AgentPage from "./agent-page/agent-page";
+import ContactUs from "./shared-components/Contact-us/Contact-us";
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <h1>Kene's Cribs</h1>
-          <p>Real Website loading.......</p>
-        </header>
-        <section>
-          <h1>hello everyone</h1>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-        </section>
+        <BrowserRouter>
+          <Navbar></Navbar>
+          <Route path="/home" component={HomePage}></Route>
+          <Route path="/listings" component={ListingsPage}></Route>
+          <Route path="/agents" component={AgentPage}></Route>
+          <Route path="/contact-us" component={ContactUs}></Route>
+        </BrowserRouter>
+
+        <Footer></Footer>
       </div>
     );
   }