title: Passing state props to components in route
body: <p>I have the following react structure</p>
  
  <pre><code>&lt;Provider store={ store }&gt;
                &lt;Router&gt;
                  &lt;Switch&gt;
                    &lt;Route path="/how-to" component={ Help } /&gt;
                    &lt;Route path="/start" component={ StartPage } /&gt;
                    &lt;Route path="/game" component={ GamePlay } /&gt;
                    &lt;Route exact path="/" component={ Home } /&gt;
                  &lt;/Switch&gt;
                &lt;/Router&gt;
          &lt;/Provider&gt;
  </code></pre>
  
  <p>There is a child in the <code>StartPage</code> component that interacts with a property in the store state</p>
  
  <pre><code>    .....
  // pickBottle is an action from the store for the state
      &lt;div className="text-center"&gt;
                          &lt;button alt={bottleData.name} onClick={ (e) =&gt; { self.props.pickBottle(bottleData) } }&gt;{bottleData.name}&lt;/button&gt;
                        &lt;/div&gt;
      ...
  
      export default connect(state =&gt; ({ bottle: state }), { pickBottle } )(PickerSlides)
  </code></pre>
  
  <p>The component works as expected as the this.props.bottle is set on the click event. However,</p>
  
  <p>When I navigate to the <code>GamePlay</code> component which has</p>
  
  <p>....</p>
  
  <pre><code>  render() {
      const { store } = this.context;
      console.log(store);
  
      return (
  
        &lt;div id="game" className="panel" &gt;
            &lt;section className="row flexbox"&gt;
              &lt;header&gt;
                &lt;hgroup&gt;
                  &lt;h2 id="tries" className="tries"&gt;Tries: &lt;span&gt;{ this.state.tries }&lt;/span&gt;&lt;/h2&gt;
                  &lt;h3 className="bottles"&gt;Opened:&lt;span id="score" className="opened"&gt;{ this.state.bottlesOpened }&lt;/span&gt;&lt;/h3&gt;
                &lt;/hgroup&gt;
              &lt;/header&gt;
              &lt;article className="row flexbox"&gt;
  
              &lt;/article&gt;
              &lt;/section&gt;
        &lt;/div&gt;
      );
    }
  }
  // map state to props
  
  const mapStateToProps = ( state ) =&gt; {
    console.log('map state ', state );
      return {
          bottle: state,
      }
  }
  
  export default connect(mapStateToProps)(GamePlay)
  </code></pre>
  
  <p><code>console.log('map state', state )</code> is undefined</p>
  
  <p>Does redux work with components across pages? Do I need to use a localStorage to help redux persist through routes?</p>
  
  <p>How can I pass the state as an updated property of the component via the Route/ Switch components?</p>