title: React-Router 4 default route content displays on all other components
body: <p>I am learning react and trying to set up routes with react-router-dom. All the routes are working except the default route. The content of the default route component displays on all other components when i navigate to their routes.
  here is the code and the output below</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import One from './one';
  import Two from './two';
  import Three from './three';
  import FourOFour from './404';
  
  import registerServiceWorker from './registerServiceWorker';
  import {BrowserRouter, Route} from 'react-router-dom';
  
  ReactDOM.render(
  &lt;BrowserRouter&gt;
      &lt;div&gt;
          &lt;Route exact={true} path="/" component={App}&gt;&lt;/Route&gt;
          &lt;Route path="/One" component={One}&gt;&lt;/Route&gt;
          &lt;Route path="/Two" component={Two}&gt;&lt;/Route&gt;
          &lt;Route path="/Three" component={Three}&gt;&lt;/Route&gt;
          &lt;Route path="*" component={FourOFour}&gt;&lt;/Route&gt;
      &lt;/div&gt;
  &lt;/BrowserRouter&gt;, 
  document.getElementById('root')
  );
  registerServiceWorker();
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/RGfVb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RGfVb.png" alt="enter image description here"></a></p>