title: Issue with react routing, unable to debug the code and find out the issue
body: <p>Here is the App.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import { BrowserRouter as Router, Route } from &quot;react-router-dom&quot;;
  
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  
  import NavBar from &quot;./components/navbar.component&quot;;
  import ExercisesList from &quot;./components/exercises-list.component&quot;;
  import EditExercise from &quot;./components/edit-exercise.component&quot;;
  import CreateExercise from &quot;./components/create-exercise.component&quot;;
  import CreateUser from &quot;./components/create-user.component&quot;;
  
  function App() {
    return (
      &lt;Router&gt;
        &lt;div className=&quot;container&quot;&gt;
          &lt;NavBar /&gt;
          &lt;br /&gt;
          &lt;Route path=&quot;/&quot; component={ExercisesList} /&gt;
          &lt;Route path=&quot;/edit/:id&quot; component={EditExercise} /&gt;
          &lt;Route path=&quot;/create&quot; component={CreateExercise} /&gt;
          &lt;Route path=&quot;/create&quot; component={CreateUser} /&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  <p>export default App;</p>
  <p>here is Navbar component code:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  export default class Navbar extends Component {
    render() {
      return (
        &lt;nav className=&quot;navbar navbar-dark bg-dark never-expend-lg &quot;&gt;
          &lt;Link to=&quot;/&quot; className=&quot;navbar-brand&quot;&gt;
            ExeriseTracker
          &lt;/Link&gt;
          &lt;div className=&quot;collpase navbar-collapse&quot;&gt;
            &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
              &lt;li class=&quot;navbar-item&quot;&gt;
                &lt;Link to=&quot;/&quot; className=&quot;nav-link&quot;&gt;
                  Exercises
                &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li className=&quot;navbar-item&quot;&gt;
                &lt;Link to=&quot;/create&quot; className=&quot;nav-link&quot;&gt;
                  Create Exercise Log
                &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li className=&quot;navbar-iteam&quot;&gt;
                &lt;Link to=&quot;/user&quot; className=&quot;nav-link&quot;&gt;
                  Create User
                &lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      );
    }
  }
  </code></pre>
  <p>this a react app which has other component other then nav bar but the react routing is not working,  Can any one help on this?</p>
  <p>Also i have used some basic bootstrap code just for testing.</p>
  <p>the result are here where im clicking one thing and it coming up with 3 statements from other 3 pages in this same page.
  <a href="https://i.stack.imgur.com/xpdyc.png" rel="nofollow noreferrer">enter image description here</a></p>