title: How to set a state variable with react-router Route?
body: <p>When a route matches, a component can be rendered, like:</p>
  
  <pre><code>&lt;Route exact path='/' component={Menu} /&gt;
  </code></pre>
  
  <p>but how can I add some action in the state variables? I tried:</p>
  
  <pre><code>&lt;Route exact path='/' render={(props) =&gt; { this.state.screentitle = 'Menu'
                                             return (&lt;Menu /&gt;) 
                                           }} /&gt;
  </code></pre>
  
  <p>but this does not work. So how can we do TWO things in a matching <code>&lt;Route&gt;</code>: do some javascript, and render the component?</p>
  
  <p>The reason for this is that I want to select one of several 'screens', such as the menu page, or the update screen, or the search page, whatever. Also, in the header block of the app there is a screen title.</p>
  
  <p>I tried also this:</p>
  
  <pre><code>&lt;Route exact path='/' render={(props) =&gt; { this.setState({screentitle: 'Menu'}); return (&lt;Menu /&gt;) }} /&gt;
  </code></pre>
  
  <p>but this gives a runtime warning: <code>Warning: Cannot update during an existing state transition (such as within</code>render<code>). Render methods should be a pure function of props and state.</code></p>