title: My React Router Links are not working. It's showing the url change in the browser but contents are not showing
body: <p>My folder structure</p>
  
  <pre><code>reactdemo
  |------------&gt;public
  |------------&gt;src
                 |-------&gt;Component
                 |-------&gt;index.js  
  </code></pre>
  
  <p>&lt;-------------index.js------------></p>
  
  <pre><code>import React from 'react';
  
  import { render } from 'react-dom';
  import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  import ReactDOM from 'react-dom';
  import Header from './Component/Header';
  import Footer from './Component/Footer';
  import Content from './Component/Content';
  import About from './Component/about';
  import Contact from './Component/Contact';
  import JSON from  './Component/db.json';
  
  
  
  
  
  class App extends React.Component {
  
      state = {
          items:JSON
      }
  
  
     render() {
    //    console.log(this.state.items)
        return (
           &lt;div&gt;
              &lt;Header/&gt;
              &lt;Content list={this.state.items} /&gt;
              &lt;Footer /&gt;
  
           &lt;/div&gt;
        );
     }
  }
  
  ReactDOM.render(&lt;App/&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>&lt;---------Header Component-------------></p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  
  //Component
  
  import About from './about.js';
  import Contact from './Contact.js';
  
  
  class Header extends React.Component {
  render() {
    return (
   &lt;Router&gt;    
  &lt;div&gt;
    &lt;nav className="navbar navbar-expand-sm bg-dark navbar-dark"&gt;
  
  
  
  
                &lt;ul className="navbar-nav"&gt;
                    &lt;li className="nav-item"&gt;
                       &lt;Link to="/"&gt;Home&lt;/Link&gt;
                    &lt;/li&gt;
                    &lt;li className="nav-item"&gt;
                       &lt;Link to="/about"&gt;About&lt;/Link&gt;
                    &lt;/li&gt;
                    &lt;li className="nav-item"&gt;
                       &lt;Link to="/contact"&gt;Contact&lt;/Link&gt;
                   &lt;/li&gt;
                &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;Switch&gt;
    &lt;Route path='/About' Component={About} /&gt;     
    &lt;Route path='/Contact' Component={Contact} /&gt;
    &lt;/Switch&gt;
  
  &lt;/div&gt;
  &lt;/Router&gt;
    );
  }
  }
  
  
  
  export default Header;
  </code></pre>
  
  <p>&lt;----------Content----------------></p>
  
  <pre><code>import React from 'react';
  
  const Content =(props) =&gt; {
  
  console.log(props)
  
  
    const test = props.list.map((list) =&gt; {
      return (
          &lt;div key={list.id}&gt;
          &lt;h4&gt;{list.title}&lt;/h4&gt;
          &lt;p&gt;{list.feed}&lt;/p&gt;
        &lt;/div&gt;
        )
  
      }
    )
  
  
   return (
      &lt;div&gt;
      {test}
      &lt;/div&gt;
    )
  
  
  
  }
  
  export default Content;
  </code></pre>
  
  <p>&lt;---------footer.js----------></p>
  
  <pre><code>   import React from 'react';
  
  class Footer extends React.Component {
     render() {
        return (
           &lt;div className="text-center"&gt;
  
    &lt;p&gt;Posted by: Hege Refsnes&lt;/p&gt;
    &lt;p&gt;Contact information: &lt;a href="mailto:someone@example.com"&gt;
    someone@example.com&lt;/a&gt;.&lt;/p&gt;
  
          &lt;/div&gt;
        );
     }
  }
  
  export default Footer;
  </code></pre>
  
  <p>&lt;---------about----------></p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  
  
  class About extends Component {
     render() {
        return (
           &lt;div&gt;
              &lt;h2&gt;About&lt;/h2&gt;
           &lt;/div&gt;
        );
     }
  }
  export default About;
  </code></pre>
  
  <p>&lt;------------Contact----------></p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  
  
  class Contact extends Component {
     render() {
        return (
           &lt;div&gt;
              &lt;h2&gt;Contact&lt;/h2&gt;
           &lt;/div&gt;
        );
     }
  }
  export default Contact;
  </code></pre>
  
  <p>&lt;-----------End of Code--------></p>
  
  <p>I'm new to react and trying to implement react router. But I'm facing an issue- whenever I click on About and Contact link, the url changes in the browser, but the contents don't show in the browser. I have created separate contents for both "about" and "contact" inside the Components folder.Also, I'm using Sublime text 3 and using Babel for ES-6 as plugin but it's showing syntax error.I have also attached a screenshot for showing the issue</p>
  
  <p><a href="https://i.stack.imgur.com/DvP4W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DvP4W.png" alt="enter image description here"></a></p>