title: Reactjs single page application - component is not loading on navigating to a link
body: <p>I created a single page application of movies and videos. This web application has 4 links which displays different kind of videos and movies. For example 'kids' link show videos for kids, 'sports' link show sports videos etc. 
  Based on link name, I am calling an API to load data on that page. But on clicking link this is not happening. Below is the code</p>
  
  <pre><code>// Root.js
  
  class Root extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              items: [],
              isLoaded: false,
          }
      }
      componentDidMount() {
          let currentPath = this.props.match.path;
          var apiUrl = "";
          if (currentPath == "/movies") {
              apiUrl = "zzzzzzzzz";
          } else if (currentPath == "/kids") {
              apiUrl = "yyyyyyyyy";
          } else if (currentPath == "/sports") {
              apiUrl = "xxxxxxxx";
          }
          fetch(apiUrl)
                  .then(res =&gt; res.json())
                  .then(json =&gt; {
                      this.setState({
                          items: json,
                          isLoaded: true
                      });
                  })
      }
  
      render() {
          var { items, isLoaded } = this.state;
          return (
          &lt;div className="Root" &gt;
              &lt;HeaderNav /&gt;
              &lt;Main items={items} /&gt;
              &lt;Footer /&gt;
          &lt;/div&gt;
          );
      }
  }
  
  export default Root;
  
  // App.js
  
  class App extends Component {
  
    render() {
  
      return (
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Route path="/" exact component={Root} /&gt;
            &lt;Route path="/movies" exact component={Root} /&gt;
            &lt;Route path="/kids" exact component={Root} /&gt;
            &lt;Route path="/" render={() =&gt; &lt;h2&gt;  404 Not Found&lt;/h2&gt;} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  
  // HeaderNav.js
  
  class HeaderNav extends Component {
      render() {
          return (
          &lt;nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"&gt;
            &lt;div className="container"&gt;
              &lt;a className="navbar-brand" href="/home"&gt;MOOVID&lt;/a&gt;
              &lt;button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
                &lt;span className="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div className="collapse navbar-collapse" id="navbarResponsive"&gt;
                &lt;ul className="navbar-nav ml-auto"&gt;
                  &lt;li className="nav-item active"&gt;
                    &lt;Link className="nav-link" to="/"&gt;Home
                      &lt;span className="sr-only"&gt;(current)&lt;/span&gt;
                    &lt;/Link&gt;
                  &lt;/li&gt;
                  &lt;li className="nav-item"&gt;
                    &lt;Link className="nav-link" to="/movies"&gt;Movies&lt;/Link&gt;
                  &lt;/li&gt;
                  &lt;li className="nav-item"&gt;
                    &lt;Link className="nav-link" to="/sports"&gt;Sports&lt;/Link&gt;
                  &lt;/li&gt;
                  &lt;li className="nav-item"&gt;
                    &lt;Link className="nav-link" to="/kids"&gt;Kids&lt;/Link&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
          );
      }
  }
  
  export default HeaderNav; ```
  </code></pre>