title: React Router remounts component everytime
body: <p>I have a render function inside <code>App.js</code>.</p>
  <pre><code>    return (
        &lt;div className=&quot;container&quot;&gt;
          &lt;h1 className=&quot;text-center main-title&quot;&gt;Activity Logger&lt;/h1&gt;
          &lt;Router&gt;
            &lt;NavigationBar /&gt;
            &lt;Route exact path=&quot;/&quot;&gt;
              {this.renderForm()}
            &lt;/Route&gt;
            &lt;Route path=&quot;/activitydisplay&quot;&gt;{this.renderTable()}&lt;/Route&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  <p>The <code>Router</code> is a <code>BrowserRouter</code>. The functions it call are</p>
  <pre><code>renderForm = () =&gt; {
      if (this.state.formDataError) {
        return &quot;Error loading data&quot;;
      }
      console.log(&quot;renderForm was called&quot;);
      return (
        &lt;div className=&quot;mt-3&quot;&gt;
          &lt;ActivityForm
            machinesList={this.state.machinesList}
            operatorsList={this.state.operatorsList}
            onFormSubmit={this.postFormData}
            postSuccessCount={this.state.postSuccessCount}
            loggedOperator={this.props.cookies.get(&quot;logger&quot;) || null}
          /&gt;
        &lt;/div&gt;
      );
    };
  </code></pre>
  <pre><code>renderTable() {
      if (this.state.tableDataError) {
        return &quot;Error loading data&quot;;
      }
      return (
        &lt;div className=&quot;mt-3&quot;&gt;
          &lt;ActivityDisplay
            activityData={this.state.activityData}
            machines={this.state.machinesList}
            operators={this.state.operatorsList}
            editDataHandler={this.editData}
            deleteDataHandler={this.deleteData}
          /&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  <p>The components are remounted when I switch between the routes at the front end. To troubleshoot, I put logging in <code>renderForm</code> function and in the <code>ActivityForm</code> constructor. I can see the logging from <code>renderForm</code> only when the <code>App</code> component is mounted and not when I switch between routes. However, I can see the logging from <code>ActivityForm</code> constructor whenever I switch between the components at the front end using a navigation bar.</p>
  <p>I lose all the states I had in the component because of this. The behavior I expect is that the component should not remount when I switch tabs. Can anyone please help?</p>