title: I created one react project and I started working on Routing, Routing is working fine but Navbar is not working properly
body: <p><a href="https://i.stack.imgur.com/rUe61.png" rel="nofollow noreferrer">! [My Output is shown like this. ]<a href="https://i.stack.imgur.com/rUe61.png" rel="nofollow noreferrer">1</a></a>.  I created one react project, and for designing I am using Bootstrap framework. I am done routing in my project. Routing is working fine, But Navbar is not working properly in my react project. So help me to resolve this issue.</p>
  
  <p>This is App.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import './App.css';
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  import Home from './Pages/Home/Home';
  import Edit from './Pages/Edit/Edit';
  import Create from './Pages/Create/Create';
  import Navbar from './Components/Navbar/Navbar';
  
  function App() {
    return (
      &lt;Router&gt;
        &lt;Navbar&gt;&lt;/Navbar&gt;
        &lt;div className="container"&gt;
          &lt;h2&gt;MERN&lt;/h2&gt;
          &lt;Route path='/' exact component={Home}&gt;&lt;/Route&gt;
          &lt;Route path='/id:/edit' component={Edit}&gt;&lt;/Route&gt;
          &lt;Route path='/create' component={Create}&gt;&lt;/Route&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>In Components Folder, I have Navbar folder, I Navbar folder I have Navbar.js </p>
  
  <p>In Navbar.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import "./Navbar.css";
  import { Link } from "react-router-dom";
  
  export default class Navbar extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;nav className="navbar navbar-expand-lg navbar-light bg-light"&gt;
            &lt;a className="navbar-brand" href="www.facebook.com"&gt;
              Navbar
            &lt;/a&gt;
            &lt;button
              className="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target="#navbarNav"
              aria-controls="navbarNav"
              aria-expanded="false"
              aria-label="Toggle navigation"
            &gt;
              &lt;span className="navbar-toggler-icon"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;div className="collapse navbar-collapse" id="navbarNav"&gt;
              &lt;ul className="navbar-nav"&gt;
                &lt;li className="nav-item active"&gt;
                  &lt;Link to="/"&gt;Home&lt;/Link&gt;
                &lt;/li&gt;
                &lt;li className="nav-item"&gt;
                  &lt;Link to="/create"&gt;Create&lt;/Link&gt;
                &lt;/li&gt;
                &lt;li className="nav-item"&gt;
                  &lt;Link to="/id:/edit"&gt;Edit&lt;/Link&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>In Pages Folder I have three folders 1)Home 2)Create 3)Edit</p>
  
  <p>This is Home.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import "./Home.css";
  
  export default class Home extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;p&gt;Welcome to Home Component&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>This is Create.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  
  export default class Create extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;p&gt;Welcome to Create Component&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>This is Edit.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  
  export default class Edit extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;p&gt;Welcome to Edit Component&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>In my react project Routing is working fine, but Navbar is not working properly. If I am not clear with my doubt please put a comment.</p>