title: ReactJS does not re-loads my updated component when separate links are clicked from the navbar
body: <p>I have this case where, in the nav bar I have different categories eg Science, business etc. When clicked on ay of these we are supposed to render News component with the appropriate category.</p>
  <p>But in my case on clicking on any of the link, although the address bar did change but news component was not being reloaded with the new category that I provided.</p>
  <p>Here are my files :</p>
  <p><strong>App.js</strong></p>
  <pre><code>import './App.css';
  
  import React, { Component } from 'react'
  import NavBar from './components/NavBar';
  import News from './components/News';
  import {
    BrowserRouter as Router,
    Switch,
    Route
  } from &quot;react-router-dom&quot;;
  
  export default class App extends Component {
    constructor() {
      super();
      this.category = 'about';
      this.uniqueKeyForRemountingNewsComponent = '';
    }
    render() {
      return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;NavBar/&gt;
            &lt;Switch&gt;
              &lt;Route exact path=&quot;/about&quot;&gt;
              &lt;/Route&gt;
              &lt;Route exact path=&quot;/business&quot;&gt;
                {this.uniqueKeyForRemountingNewsComponent = this.category = 'business'}
              &lt;/Route&gt;
              &lt;Route exact path=&quot;/entertainment&quot;&gt;
                {this.uniqueKeyForRemountingNewsComponent = this.category = 'entertainment'}
              &lt;/Route&gt;
              &lt;Route exact path=&quot;/general&quot;&gt;
                {this.uniqueKeyForRemountingNewsComponent = this.category = 'general'}
              &lt;/Route&gt;
              &lt;Route exact exactpath=&quot;/health&quot;&gt;
                {this.uniqueKeyForRemountingNewsComponent = this.category = 'health'}
              &lt;/Route&gt;
              &lt;Route exact path=&quot;/science&quot;&gt;
                {this.uniqueKeyForRemountingNewsComponent = this.category = 'science'}
              &lt;/Route&gt;
              &lt;Route exact path=&quot;/sports&quot;&gt;
                {this.uniqueKeyForRemountingNewsComponent = this.category = 'sports'}
              &lt;/Route&gt;
              &lt;Route exact path=&quot;/technology&quot;&gt;
                {this.uniqueKeyForRemountingNewsComponent = this.category = 'technology'}
              &lt;/Route&gt;
            &lt;/Switch&gt;
            &lt;News key={this.uniqueKeyForRemountingNewsComponent} pageSize={5} country=&quot;in&quot; category={this.category}/&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      )
    }
  }
  </code></pre>
  <p><strong>NavBar.js</strong></p>
  <pre><code>import React, { Component } from 'react'
  import {
      Link
    } from &quot;react-router-dom&quot;;
  
  export class NavBar extends Component {
  
      render() {
          return (
              &lt;div&gt;
                  &lt;nav className=&quot;navbar navbar-expand-lg navbar-dark bg-dark&quot;&gt;
                      &lt;div className=&quot;container-fluid&quot;&gt;
                          &lt;Link className=&quot;navbar-brand&quot; to=&quot;/&quot;&gt;NewsMonkey&lt;/Link&gt;
                          &lt;button className=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                          &lt;span className=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;div className=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
                          &lt;ul className=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
                              &lt;li className=&quot;nav-item&quot;&gt;
                              &lt;Link className=&quot;nav-link active&quot; aria-current=&quot;page&quot; to=&quot;/&quot;&gt;Home&lt;/Link&gt;
                              &lt;/li&gt;
                              &lt;li className=&quot;nav-item&quot;&gt;
                              &lt;Link className=&quot;nav-link&quot; to=&quot;/business&quot;&gt;Business&lt;/Link&gt;
                              &lt;/li&gt;
                              &lt;li className=&quot;nav-item&quot;&gt;
                              &lt;Link className=&quot;nav-link&quot; to=&quot;/entertainment&quot;&gt;Entertainment&lt;/Link&gt;
                              &lt;/li&gt;
                              &lt;li className=&quot;nav-item&quot;&gt;
                              &lt;Link className=&quot;nav-link&quot; to=&quot;/general&quot;&gt;General&lt;/Link&gt;
                              &lt;/li&gt;
                              &lt;li className=&quot;nav-item&quot;&gt;
                              &lt;Link className=&quot;nav-link&quot; to=&quot;/health&quot;&gt;Health&lt;/Link&gt;
                              &lt;/li&gt;
                              &lt;li className=&quot;nav-item&quot;&gt;
                              &lt;Link className=&quot;nav-link&quot; to=&quot;/science&quot;&gt;Science&lt;/Link&gt;
                              &lt;/li&gt;
                              &lt;li className=&quot;nav-item&quot;&gt;
                              &lt;Link className=&quot;nav-link&quot; to=&quot;/sports&quot;&gt;Sports&lt;/Link&gt;
                              &lt;/li&gt;
                              &lt;li className=&quot;nav-item&quot;&gt;
                              &lt;Link className=&quot;nav-link&quot; to=&quot;/technology&quot;&gt;Technology&lt;/Link&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default NavBar
  </code></pre>
  <p><strong>News.js</strong></p>
  <pre><code>import React, { Component } from 'react'
  import NewsItem from './NewsItem'
  import Spinner from './Spinner'
  import PropTypes from 'prop-types'
  
  
  export class News extends Component {
  
      static defaultProps = {
          country: 'in',
          pageSize: 5,
          category: 'general'
      }
  
      static propTypes = {
          country: PropTypes.string.isRequired,
          pageSize: PropTypes.number.isRequired,
          category: PropTypes.string.isRequired,
      }
  
      constructor(){
          super();
          this.state = {
              articles:[],
              loading:true,
              page:1,
              totalResults : 0
          }
      }
  
      async componentDidMount() {
          let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&amp;category=${this.props.category}&amp;apiKey=APIKEY&amp;page=1&amp;pageSize=${this.props.pageSize}`;
          this.setState({loading: true});
          let data = await fetch(url);
          console.log(data);
          let parsedData = await data.json();
          this.setState({articles: parsedData.articles, totalResults: parsedData.totalResults, loading: false})
          console.log(this.state);
      }
  
      handlePrevClick = async ()=&gt;{
          let currentPage = this.state.page;
          let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&amp;category=${this.props.category}&amp;apiKey=APIKEY&amp;page=${currentPage-1}&amp;pageSize=${this.props.pageSize}`;
          this.setState({loading: true});
          let data = await fetch(url);
          console.log(data);
          let parsedData = await data.json();
          console.log(parsedData);
          if(parsedData)
              this.setState({articles: parsedData.articles, page : currentPage - 1, loading: false});
              console.log(this.state);
      }
  
      handleNextClick = async ()=&gt;{
          let currentPage = this.state.page;
          let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&amp;category=${this.props.category}&amp;apiKey=APIKEY&amp;page=${currentPage+1}&amp;pageSize=${this.props.pageSize}`;
          this.setState({loading: true});
          let data = await fetch(url);
          console.log(data);
          let parsedData = await data.json();
          console.log(parsedData);
          if(parsedData)
              this.setState({articles: parsedData.articles, page : currentPage + 1, loading: false});
              console.log(this.state);
      }
  
      render() {
          return (
              &lt;div className=&quot;container my-3&quot;&gt;
                  &lt;h3 className=&quot;text-center&quot;&gt;NewsMonkey - Top headlines&lt;/h3&gt;
                  {this.state.loading &amp;&amp; &lt;Spinner/&gt;}
                  
                  &lt;div className=&quot;row&quot;&gt;
                  {!this.state.loading &amp;&amp; this.state.articles.map((element)=&gt;{
                      return (
                      &lt;div className=&quot;col-md-4&quot; key={element.url}&gt;
                          &lt;NewsItem title={element &amp;&amp; element.title?element.title.slice(0, 45): &quot;&quot;} description={element &amp;&amp; element.description?element.description.slice(0, 50):&quot;&quot;}
                          imageUrl={element.urlToImage}
                          newsUrl ={element.url}/&gt;
                      &lt;/div&gt;
                  )})}
                  &lt;/div&gt;
                  &lt;div className=&quot;container d-flex justify-content-between&quot;&gt;
                      
                      &lt;button type=&quot;button&quot; disabled={this.state.page&lt;=1} className=&quot;btn btn-dark&quot; onClick={this.handlePrevClick} &gt;&amp;larr; Prev&lt;/button&gt;
                      &lt;button type=&quot;button&quot; disabled={this.props.pageSize*this.state.page&gt;=this.state.totalResults} className=&quot;btn btn-dark&quot; onClick={this.handleNextClick}&gt;Next &amp;rarr;&lt;/button&gt;
                  &lt;/div&gt;
                  
              &lt;/div&gt;
  
          )
      }
  }
  
  export default News
  </code></pre>