<p dir="auto">Describe what you were doing when the bug occurred:<br>
1.<br>
2.<br>
3.</p>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.2.1-3816ae7c3</p>
<p dir="auto">Call stack: at n.value (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:163226)<br>
at m (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:332702)<br>
at uc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:332919)<br>
at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59907)<br>
at el (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:68139)<br>
at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:108547)<br>
at Lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92715)<br>
at Pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92640)<br>
at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89544)<br>
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:46341</p>
<p dir="auto">Component stack: in uc<br>
in div<br>
in div<br>
in wo<br>
in Unknown<br>
in n<br>
in Unknown<br>
in div<br>
in div<br>
in Li<br>
in $e<br>
in dn<br>
in Ca<br>
in Pc</p>
<p dir="auto">Here is the link to <a href="http://codesandbox.io/s/34r1l9wl4m" rel="nofollow">Sandbox</a></p>
<p dir="auto">I have simple code like this:</p>
<p dir="auto"><strong>Sidebar.js</strong>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from &quot;react&quot;;
import { BrowserRouter as Router, Route, NavLink } from &quot;react-router-dom&quot;;

import Menu from &quot;./Menu&quot;;

class SidebarExample extends Component {
  render() {
    console.log(&quot;Sidebar - render()&quot;, new Date());
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;div&gt;
            If I uncomment the below component Menu the render() method of the component is called everytime I change the link. Why? In the Menu component the is the same html code below. What is going on?
            {/*&lt;Menu /&gt;*/}
            &lt;ul&gt;
              &lt;li&gt;
                &lt;NavLink exact to=&quot;/&quot;&gt;
                  Home
                &lt;/NavLink&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;NavLink to=&quot;/bubblegum&quot;&gt;Bubblegum&lt;/NavLink&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;NavLink to=&quot;/shoelaces&quot;&gt;Shoelaces&lt;/NavLink&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
}

export default SidebarExample;"><pre class="notranslate"><code class="notranslate">import React, { Component } from "react";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";

import Menu from "./Menu";

class SidebarExample extends Component {
  render() {
    console.log("Sidebar - render()", new Date());
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;div&gt;
            If I uncomment the below component Menu the render() method of the component is called everytime I change the link. Why? In the Menu component the is the same html code below. What is going on?
            {/*&lt;Menu /&gt;*/}
            &lt;ul&gt;
              &lt;li&gt;
                &lt;NavLink exact to="/"&gt;
                  Home
                &lt;/NavLink&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;NavLink to="/bubblegum"&gt;Bubblegum&lt;/NavLink&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;NavLink to="/shoelaces"&gt;Shoelaces&lt;/NavLink&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
}

export default SidebarExample;
</code></pre></div>
<p dir="auto"><strong>Menu.js</strong>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from &quot;react&quot;;
import { NavLink } from &quot;react-router-dom&quot;;

class Menu extends Component {
  render() {
    console.log(&quot;Menu - render()&quot;, new Date());
    return (
      &lt;ul&gt;
        &lt;li&gt;
          &lt;NavLink exact to=&quot;/&quot;&gt;
            Home
          &lt;/NavLink&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;NavLink to=&quot;/bubblegum&quot;&gt;Bubblegum&lt;/NavLink&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;NavLink to=&quot;/shoelaces&quot;&gt;Shoelaces&lt;/NavLink&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    );
  }
}

export default Menu;"><pre class="notranslate"><code class="notranslate">import React, { Component } from "react";
import { NavLink } from "react-router-dom";

class Menu extends Component {
  render() {
    console.log("Menu - render()", new Date());
    return (
      &lt;ul&gt;
        &lt;li&gt;
          &lt;NavLink exact to="/"&gt;
            Home
          &lt;/NavLink&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;NavLink to="/bubblegum"&gt;Bubblegum&lt;/NavLink&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;NavLink to="/shoelaces"&gt;Shoelaces&lt;/NavLink&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    );
  }
}

export default Menu;
</code></pre></div>
<p dir="auto">If I uncomment the component the render() method of the component is called everytime I change the link. Why? In the Menu component there is the same html code below.</p>
<p dir="auto"><strong>What is going on?</strong></p>
<p dir="auto">I'm loosing my mind!</p>