title: react router not rendering the component
body: <p>I am trying to learn react route configuration. I am adding all the navigation link at one place which is entry point index.js and my expectation is when someone react to the path configured during navigation, respective component should be loaded in the briwser. I am adding all the route path in my entry file index.js as follow:</p>
  
  
  
  <pre class="lang-jsx prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './app.js';
  import { BrowserRouter, Route, hashHistory } from 'react-router-dom';
  import AboutUs from './AboutUs.js';
  import ContactUs from './ContactUs.js';
  import {Switch} from 'react-router';
  
  ReactDOM.render(
    (&lt;BrowserRouter&gt;
       &lt;Switch&gt;
            &lt;Route path="/" component={App}/&gt;
            &lt;Route path="/about-us" component={AboutUs}/&gt;
            &lt;Route path="/contact-us" component={ContactUs}/&gt;
       &lt;/Switch&gt;
     &lt;/BrowserRouter&gt;)
  , document.getElementById('app'));
  </code></pre>
  
  <p>app.js is as follows :</p>
  
  <pre class="lang-jsx prettyprint-override"><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  
  class App extends Component {
  
    constructor(props){
      super(props);
  
    }
  
  
    render() {
     return (
       &lt;div&gt;
         &lt;h1&gt;React Router Tutorial&lt;/h1&gt;
         &lt;ul role="nav"&gt;
           &lt;li&gt;&lt;Link to="/about-us"&gt;About&lt;/Link&gt;&lt;/li&gt;
           &lt;li&gt;&lt;Link to="/contact-us"&gt;Contact&lt;/Link&gt;&lt;/li&gt;
         &lt;/ul&gt;
       &lt;/div&gt;
     )
   }
  
  }
  export default App;
  </code></pre>
  
  <p>AboutUs.js is as follows :</p>
  
  <pre class="lang-jsx prettyprint-override"><code>import React, { Component } from 'react';
  
  class AboutUs extends Component {
  
    render(){
      return(
        &lt;div&gt;
          AboutUs
        &lt;/div&gt;
      );
    }
  }
  
  export default AboutUs ;
  </code></pre>
  
  <p>ContactUs.js is as follows :</p>
  
  <pre class="lang-jsx prettyprint-override"><code>import React, { Component } from 'react';
  
  class ContactUs extends Component{
  
    render(){
      return(
        &lt;div&gt;
          Contact Us
        &lt;/div&gt;
      );
    }
  }
  
  export default ContactUs;
  </code></pre>
  
  <p>But when I click on any of the link /about-us or /contact-us , it does not load any content and displays the same app.js as follows</p>
  
  <p><a href="https://i.stack.imgur.com/peeJB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/peeJB.png" alt="enter image description here"></a></p>
  
  <p>Can someone please tell me why it is happening?</p>