merged all components and completed the route

src/App.js

@@ -20,11 +20,8 @@ class App extends Component {
           <Route path="/agents" component={AgentPage}></Route>
           {/* <Route path="/contact-us" component={ContactUs}></Route> */}
         </BrowserRouter>
-
+        <Homepage></Homepage>
         <Footer></Footer>
-        {/* <Homepage/> */}
-
-        <Homepage />
       </div>
     );
   }

src/homePage/homePage.js

@@ -1,19 +1,19 @@
 import { Component } from "react";
-import './Homepage.css';
+import "./Homepage.css";
-import house1 from '../images/house1.jpg';
+import house1 from "../images/house1.jpg";
-import house2 from '../images/house2.jpg';
+import house2 from "../images/house2.jpg";
-import house3 from '../images/house3.jpg';
+import house3 from "../images/house3.jpg";
-import Carousel from 'react-bootstrap/Carousel'
+import Carousel from "react-bootstrap/Carousel";
 
 class Homepage extends Component {
   constructor(props) {
     super(props);
     this.state = {
-            firstname: '',
+      firstname: "",
-            lastname: '',
+      lastname: "",
-            email: '',
+      email: "",
-            message: ''
+      message: "",
-        }
+    };
   }
 
   render() {
@@ -33,27 +33,13 @@ class Homepage extends Component {
           <div className="housesIntro">
             <Carousel>
               <Carousel.Item>
-                                <img
+                <img className="headerImg" src={house1} alt="First House" />
-                                    className="headerImg"
-                                    src={house1}
-                                    alt="First House"
-                                />
               </Carousel.Item>
               <Carousel.Item>
-                                <img
+                <img className="headerImg" src={house2} alt="Second House" />
-                                    className="headerImg"
-                                    src={house2}
-                                    alt="Second House"
-                                />
-
               </Carousel.Item>
               <Carousel.Item>
-                                <img
+                <img className="headerImg" src={house3} alt="Third House" />
-                                    className="headerImg"
-                                    src={house3}
-                                    alt="Third House"
-                                />
-
               </Carousel.Item>
             </Carousel>
           </div>
@@ -62,23 +48,54 @@ class Homepage extends Component {
           <div className="container-fluid">
             <div className="contactIntro">
               <h2 className="heading-1">Contact Us</h2>
-                            <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
+              <form
+                id="contact-form"
+                onSubmit={this.handleSubmit.bind(this)}
+                method="POST"
+              >
                 <div className="formhelper row">
                   <div className="col-6">
-                                        <input type="text" className="form-control" placeholder="First Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="First Name"
+                      value={this.state.name}
+                      onChange={this.onNameChange.bind(this)}
+                    />
                   </div>
                   <div className="col-6">
-                                        <input type="text" className="form-control" placeholder="Last Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Last Name"
+                      value={this.state.name}
+                      onChange={this.onNameChange.bind(this)}
+                    />
                   </div>
                 </div>
                 <div className="form-group">
-                                    <input type="email" className="form-control" placeholder="Email Address" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
+                  <input
+                    type="email"
+                    className="form-control"
+                    placeholder="Email Address"
+                    aria-describedby="emailHelp"
+                    value={this.state.email}
+                    onChange={this.onEmailChange.bind(this)}
+                  />
                 </div>
                 <div className="form-group">
-                                    <textarea className="form-control" placeholder="Message" rows="5" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
+                  <textarea
+                    className="form-control"
+                    placeholder="Message"
+                    rows="5"
+                    value={this.state.message}
+                    onChange={this.onMessageChange.bind(this)}
+                  />
                 </div>
                 <div className="buttonhelper">
-                                    <button type="submit" className="button-1">Submit</button>
+                  <button type="submit" className="button-1">
+                    Submit
+                  </button>
                 </div>
               </form>
             </div>
@@ -89,19 +106,18 @@ class Homepage extends Component {
   }
 
   onNameChange(event) {
-        this.setState({ name: event.target.value })
+    this.setState({ name: event.target.value });
   }
 
   onEmailChange(event) {
-        this.setState({ email: event.target.value })
+    this.setState({ email: event.target.value });
   }
 
   onMessageChange(event) {
-        this.setState({ message: event.target.value })
+    this.setState({ message: event.target.value });
   }
 
-    handleSubmit(event) {
+  handleSubmit(event) {}
-    }
 }
 
 export default Homepage;

src/shared-components/navbar-component/Navbar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
 import "./Navbar.css";
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const Navbar = () => {
@@ -25,7 +25,7 @@ const Navbar = () => {
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav ml-auto">
             <li class="nav-item">
-              <Link class="nav-link" to="/home">
+              <Link class="nav-link" to="/">
                 Home
               </Link>
             </li>
@@ -51,4 +51,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default withRouter(Navbar);