title: useEffect does not re-run when the params changes
body: <p>I have 6 links (home, world, politics, business, technology, sports) on my navbar, and I only want the &quot;section&quot; param to be one of these values. If other value of &quot;section&quot; is entered, it will show a &quot;page cannot be found&quot; message.</p>
  <p>All 6 links are working correctly. useEffect reruns when another link on the navbar is clicked. However, if I enter an invalid section param, it first shows the &quot;page cannot be found&quot; message,
  then I click a link on the navbar, useEffect does not rerun and the app crashed.</p>
  <p>I cannot figure out why useEffect does not rerun, I did specify the props.match.params.section as its dependency.</p>
  <pre><code>const Headlines = (props) =&gt; {
      useEffect(() =&gt; {
          console.log(props.match.params.section);
          props.getArticles(props.match.params.section === 'sports' ? 'sport' : props.match.params.section);
      }, [props.match.params.section]);
      if (props.match.params.section !== undefined &amp;&amp;
          props.match.params.section !== 'world' &amp;&amp;
          props.match.params.section !== 'politics' &amp;&amp;
          props.match.params.section !== 'business' &amp;&amp;
          props.match.params.section !== 'technology' &amp;&amp;
          props.match.params.section !== 'sports') {
          return (
              &lt;Container fluid&gt;
                  &lt;h1&gt;The page cannot be found&lt;/h1&gt;
              &lt;/Container&gt;
          );
      }
      return (
          props.news.loading ?
              &lt;Spinner/&gt;
              :
              &lt;Container fluid className={classes.headlines}&gt;
                  {props.news.articles.map((article) =&gt; {
                      return &lt;HeadlineItem key={article.id} article={article}/&gt;
                  })}
              &lt;/Container&gt;
      )
  };
  </code></pre>
  <p>The code of the navbar:</p>
  <pre><code>&lt;Nav className=&quot;mr-auto&quot;&gt;
     &lt;NavLink to=&quot;/&quot;
        exact
        className={classes.link}
        activeClassName={classes.selected}&gt;Home&lt;/NavLink&gt;
     &lt;NavLink to=&quot;/world&quot;
        className={classes.link}
        activeClassName={classes.selected}&gt;World&lt;/NavLink&gt;
     &lt;NavLink to=&quot;/politics&quot;
        className={classes.link}
        activeClassName={classes.selected}&gt;Politics&lt;/NavLink&gt;
     &lt;NavLink to=&quot;business&quot;
        className={classes.link}
        activeClassName={classes.selected}&gt;Business&lt;/NavLink&gt;
     &lt;NavLink to=&quot;/technology&quot;
        className={classes.link}
        activeClassName={classes.selected}&gt;Technology&lt;/NavLink&gt;
     &lt;NavLink to=&quot;/sports&quot;
        className={classes.link}
        activeClassName={classes.selected}&gt;Sports&lt;/NavLink&gt;
  &lt;/Nav&gt;
  </code></pre>
  <p>The code of App.js:</p>
  <pre><code>function App() {
      return (
          &lt;Provider store={store}&gt;
              &lt;Router&gt;
                  &lt;NavigationBar/&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path=&quot;/:section?&quot; component={Headlines}/&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          &lt;/Provider&gt;
      );
  }
  </code></pre>