title: How to pass state up to Router component?
body: <p>I'm pretty new to React and I'm trying to create a simple game. All the data is in state in <strong>App</strong> component. I want to redirect page to <strong>Battle</strong> component with couple of props using Router. Can I pass state from App up to the Router so Router can pass it down to Battle component like this:</p>
  <pre><code>&lt;Route path=&quot;/game/battle&quot; component={
    &lt;Battle
          monster = {this.props.details} //some props living
          team = {this.props.team}       //in App component
          player={this.props.player}     //can i pass it here somehow?
        }
    /&gt;
  </code></pre>
  <p>Components look like this:
  <strong>Router =&gt; App(state) =&gt; Battle</strong>        and somewhere after onClick(change path) i <strong>want Router =&gt; Battle(with data from App state) =&gt; return to App after battle</strong>. Is there a way to achieve it?
  Thanks to everyone interested</p>
  <p>EDIT render prop fixed the issue, thanks. Router renders data passed via props but is it a good idea to pass data from other component state to Router like this:</p>
  <pre><code>&lt;App  //this is where state with monster, team, player lives
   (...)
    &lt;Router
          monster = {this.state.details} //some props living in this App component
          team = {this.state.team}       //can i pass it to Router somehow
          player={this.state.player}     //so Router renders Battle component 
                                         //with monster, team, player data?
        /&gt;
  /&gt;
  </code></pre>
  <p>EDIT 2
  Ok, so Im trying to place <code>Router</code> component inside App component and pass some props to it from <code>App</code> state. In this <code>App</code> component also I change path to <code>/battle</code> using onClick. In <code>Router</code> I pass props using render props but it crashed app for good. I guess I messed something up...</p>
  <p>Router.js:
  (...)
  
  </p>
  <pre><code>      &lt;Route path=&quot;/game/:storeId&quot; component={App} /&gt;
  
        &lt;Route
         path=&quot;/battle&quot;
         component={() =&gt; (
        &lt;Battle
            player={this.props.player}
            team={this.props.team}
            monster={this.props.monster}
        /&gt;
        )}/&gt;
        &lt;Route component={NotFound} /&gt;
      &lt;/Switch&gt;
    &lt;/BrowserRouter&gt;
  (...) export default Router;
  </code></pre>
  <p>App.js:</p>
  <pre><code>(...)
    state = {
      player: {},
      monsters: {},
      locations: {},
      team: {},
      battleMode:  false,
      communicate: &quot;asdad&quot;,
      merchants: {},
      quests: {},
      items: {},
    };
  
  (...) return(
                        &lt;Router
          monster= {this.state.monster} //some props living in this App component
          team = {this.state.team}       //can i pass it to Router somehow
          player={this.state.player}     //so Router renders Battle component 
                                         //with monster, team, player data?
                  /&gt;
            &lt;button onClick={()=&gt;{this.props.history.push(`/battle`)}}&gt;Go →&lt;/button&gt;
  
  (...) 
  )
  </code></pre>
  <p>Solution: follow this sandbox, it's great:
  <a href="http://%20codesandbox.io/s/cranky-keller-hbig1?file=/src/App.js" rel="nofollow noreferrer">codesandbox.io/s/cranky-keller-hbig1?file=/src/App.js</a></p>