react router not rendering the component

Question

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:

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(
  (<BrowserRouter>
     <Switch>
          <Route path="/" component={App}/>
          <Route path="/about-us" component={AboutUs}/>
          <Route path="/contact-us" component={ContactUs}/>
     </Switch>
   </BrowserRouter>)
, document.getElementById('app'));

app.js is as follows :

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 (
     <div>
       <h1>React Router Tutorial</h1>
       <ul role="nav">
         <li><Link to="/about-us">About</Link></li>
         <li><Link to="/contact-us">Contact</Link></li>
       </ul>
     </div>
   )
 }

}
export default App;

AboutUs.js is as follows :

import React, { Component } from 'react';

class AboutUs extends Component {

  render(){
    return(
      <div>
        AboutUs
      </div>
    );
  }
}

export default AboutUs ;

ContactUs.js is as follows :

import React, { Component } from 'react';

class ContactUs extends Component{

  render(){
    return(
      <div>
        Contact Us
      </div>
    );
  }
}

export default ContactUs;

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

Can someone please tell me why it is happening?

Answer 1

Switch renders the first route that it matches in the order that it is given.

<BrowserRouter>
  <Switch>
       <Route path="/about-us" component={AboutUs}/>
       <Route path="/contact-us" component={ContactUs}/>
       <Route path="/" component={App}/>
  </Switch>
</BrowserRouter>

Because you had given '/' as first route, anything would match it and render App component.